import React from "react";
import { Row, Col, Typography } from "antd";
import {
  CheckCircleOutlined
} from "@ant-design/icons";
import styles from "./featuresSection.module.scss";

const { Title, Paragraph } = Typography;

const FeaturesSection: React.FC = () => {
  const features = [
    "Fast Lightning Delivery",
    "100% performance guarantee",
    "48-hour service turnaround",
    "2-year worry-free warranty",
    "100% performance guarantee",
    "48-hour service turnaround",
  ];

  return (
    <div className={styles.featuresSection}>
      <div className="container">
        <Row gutter={[24, 24]} align="middle">
          {/* Left side - Badge */}
          <Col xs={24} md={8} style={{ textAlign: "center" }}>
            <img
              src="/images/Badge.svg" // replace with your award badge image path
              alt="Best Award"
              className={styles.badgeImage}
            />
          </Col>

          {/* Right side - Text */}
          <Col xs={24} md={16}>
            <Title level={2} className={styles.mainTitle}>
              India’s Fastest Online Store for Spare Parts
            </Title>
            <Paragraph className={styles.subtitle}>
              Indispare supports customers in a different ways:
            </Paragraph>

            <ul className={styles.featureList}>
              {features.map((feature, index) => (
                <li key={index} className={styles.featureItem}>
                  <CheckCircleOutlined className={styles.checkIcon} />
                  {feature}
                </li>
              ))}
            </ul>
          </Col>
        </Row>
      </div>
    </div>
  );
};

export default FeaturesSection;