import Image from "next/image";
import { FC } from "react";

export interface Testimonial {
  name: string;
  imageSrc: string;
  role: string;
  quote: string;
  rating: number;
}

const TestimonialSlide: FC<{ testimonial: Testimonial }> = ({
  testimonial,
}) => {
  return (
    <div className="min-w-0 flex-[0_0_100%] md:flex-[0_0_25%] p-4">
      <div className="bg-neutral-100 relative h-full rounded-lg overflow-hidden">
        <div className="p-4">
          <svg
            width="66"
            height="40"
            viewBox="0 0 86 60"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              fillRule="evenodd"
              clipRule="evenodd"
              d="M16.0765 13.9585C17.4454 13.6277 18.8447 13.4611 20.2483 13.4619C31.3638 13.4619 40.372 23.7568 40.372 36.4509C40.372 49.1489 31.3638 59.4437 20.2483 59.4437C9.13285 59.4437 0.121094 49.1527 0.121094 36.4509C0.121094 36.0795 0.128201 35.7042 0.145968 35.3327H0.121094C0.121094 16.1721 13.7667 0.582031 30.5393 0.582031V8.29936C25.0989 8.29936 20.0813 10.4144 16.0765 13.9585ZM61.1139 13.9585C62.4572 13.6325 63.8502 13.4619 65.2787 13.4619C76.3941 13.4619 85.4059 23.7568 85.4059 36.4509C85.4059 49.1489 76.3941 59.4437 65.2787 59.4437C54.1632 59.4437 45.155 49.1527 45.155 36.4509C45.155 36.0795 45.1621 35.7042 45.1799 35.3327H45.155C45.155 16.1721 58.8006 0.582031 75.5733 0.582031V8.29936C70.1293 8.29936 65.1188 10.4144 61.1139 13.9585Z"
              fill="var(--primary-900)"
            />
          </svg>
        </div>
        <div className="pb-4 px-4 mb-16">
          <p className="text-lg">{testimonial.quote}</p>
        </div>
        <div className="pb-4 px-4 h-fit absolute bottom-0 left-0">
          <p className="text-sm">{testimonial.name}</p>
        </div>
      </div>
    </div>
  );
};

export default TestimonialSlide;