import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from '@/components/ui/carousel';
import { testimonials } from './data';
import { motion } from 'framer-motion';

const gridVariants = {
  hidden: { opacity: 0, y: -30 },
  show: {
    opacity: 1,
    y: 0,
    transition: {
      type: 'tween',
      ease: [0.25, 0.25, 0.25, 0.75],
      duration: 1,
    },
  },
};

export default function Testimonials() {
  return (
    <motion.section
      variants={gridVariants}
      initial="hidden"
      whileInView="show"
      viewport={{ once: true }}
      className="px-[1.5rem] lg:px-[3.25rem] xl:px-[6.25rem] mb-20"
    >
      {/* <h1>Testimonials</h1> */}
      <Carousel className="w-full  pt-8">
        <div className="flex justify-between items-center mb-6">
          <h1 className="">Testimonials</h1>
          <div className="flex space-x-2">
            <CarouselPrevious className="bg-categoryButton border-2 border-categoryButtonBorder rounded-[9px] md:rounded-[14px] flex items-center justify-center w-10 h-10 md:w-20 md:h-14" />
            <CarouselNext className="bg-categoryButton border-2 border-categoryButtonBorder rounded-[9px] md:rounded-[14px] flex items-center justify-center w-10 h-10  md:w-20 md:h-14" />
          </div>
        </div>
        <div className=" rounded-lg ">
          <CarouselContent>
            {testimonials.map((testimonial, index) => (
              <CarouselItem key={index}>
                <div className="border-2 md:aspect-[413/130] bg-gradient-to-l from-[#bbf1fa] rounded-lg to-white via-[white] flex flex-col md:flex-row items-center h-full justify-between pt-4 md:pt-0 px-4 sm:px-10">
                  <div className=" md:flex-grow md:basis-2/3">
                    <h3 className="font-extrabold text-lg sm:text-2xl xl:text-3xl ">
                      {testimonial.text}
                    </h3>
                    <h5 className="mt-4 md:mt-7 font-inter font-semibold text-base md:text-lg">
                      {testimonial.name}
                    </h5>
                    {testimonial.job && (
                      <p className="font-inter text-secondary text-sm md:text-base">
                        {testimonial.job}
                      </p>
                    )}
                  </div>
                  <div className="self-end md:basis-1/3">
                    <img draggable="false" src={testimonial.image} alt="testimonials" />
                  </div>
                </div>
              </CarouselItem>
            ))}
          </CarouselContent>
        </div>
      </Carousel>
    </motion.section>
  );
}