import React from "react";
import Slider from "react-slick";
import { Card, Typography } from "antd";
import { LeftOutlined, RightOutlined,PlayCircleOutlined } from "@ant-design/icons";
import styles from './testimonial.module.scss';
import cx from 'classnames';
const { Title, Text } = Typography;

interface Testimonial {
  id: number;
  name: string;
  company: string;
  quote: string;
  image: string;
}

const testimonials: Testimonial[] = [
  {
    id: 1,
    name: "Amit V.,",
    company: "TechSpare Pvt. Ltd.",
    quote: " Indispare made spare part sourcing quick and easy. Huge time-saver!",
    image: "/images/testimonial-1.svg",
  },
  {
    id: 2,
    name: "Shruti P.,",
    company: "Shruti Engineering Works",
    quote: "Great platform for small manufacturers like us. Reliable and fast!",
    image: "/images/testimonial-2.svg",
  },
  {
    id: 3,
    name: "Rohit M.,",
    company: "Mektek Industries",
    quote: "Love the spec comparison and warranty options. Very helpful!",
    image: "/images/testimonial-3.svg",
  },
  {
    id: 4,
    name: "Amit V.,",
    company: "TechSpare Pvt. Ltd.",
    quote: "Selling spares online is now smooth and hassle-free. Thanks, Indispare!",
    image: "/images/testimonial-4.svg",
  },
];

const Arrow = ({ className, onClick, direction }: any) => (
  <div
    className={className}
    onClick={onClick}
    role="button"
    tabIndex={0}
    aria-label={direction === "left" ? "Previous testimonial" : "Next testimonial"}
    onKeyDown={(e) => {
      if (e.key === "Enter" || e.key === " ") {
        e.preventDefault();
        onClick?.(e);
      }
    }}
    style={{
      display: "flex",
      alignItems: "center",
      justifyContent: "center",
      width: 40,
      height: 40,
      background: "#fff",
      borderRadius: "50%",
      boxShadow: "0 2px 8px rgba(0,0,0,0.15)",
      zIndex: 10,
      cursor: "pointer",
    }}
  >
    {direction === "left" ? <LeftOutlined /> : <RightOutlined />}
  </div>
);

const TestimonialsSlider: React.FC = () => {
  const settings = {
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 4,
    slidesToScroll: 1,
    arrows: false,
    nextArrow: <Arrow direction="right" />,
    prevArrow: <Arrow direction="left" />,
    responsive: [
      {
        breakpoint: 1200,
        settings: { slidesToShow: 3 },
      },
      {
        breakpoint: 768,
        settings: { slidesToShow: 2 },
      },
    ],
  };

  return (
   <div className={cx(styles.home__we_are_trust__block, styles.home__we_are_trust__block_reviews, "py-10 my-10")}>
           <div className={cx("container py-2")}>
           <h2  className={cx("sectionSubTitle")}> Trusted by Our Customers</h2>
           <div className={styles.home__we_are_trust__list}>
      

      <Slider {...settings}>
        {testimonials.map((t) => (
          <div key={t.id} className="testimonial-slide">
            <Card
              hoverable
              style={{
                borderRadius: 12,
                overflow: "hidden",
                textAlign: "center",
                height: "100%",
              }}
              cover={
                <div style={{ position: "relative" }}>
                  <img
                    src={t.image}
                    alt={t.name}
                    style={{
                      width: "100%",
                      height: 300,
                      objectFit: "cover",
                    }}
                  />
                  {/* Play Icon Overlay */}
                  {/* <div 
                    className={styles.playIconOverlay}
                    style={{
                      position: "absolute",
                      top: "50%",
                      left: "50%",
                      transform: "translate(-50%, -50%)",
                      background: "#291C61",
                      borderRadius: "50%",
                      width: 60,
                      height: 60,
                      display: "flex",
                      alignItems: "center",
                      justifyContent: "center",
                      cursor: "pointer",
                      transition: "all 0.3s ease",
                    }}
                  >
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      className={styles.playIcon}
                      fill="currentColor"
                      viewBox="0 0 24 24"
                      style={{
                        width: 24,
                        height: 24,
                        color: "white",
                      }}
                    >
                      <path d="M8 5v14l11-7z" />
                    </svg>
                  </div> */}
                </div>
              }
            >
               <div className={styles.titleContainer}>
                    <div
                      className={styles.title}
                    >
                      {t.name}  {t.company}
                    </div>
                    
                  </div>
                 
              <div className={styles.message}>
                "{t.quote} "
              </div>
            </Card>
          </div>
        ))}
      </Slider>

      
    </div>
    </div>
    </div>
  );
};

export default TestimonialsSlider;