import fivestars from '@/assets/images/fivestars.svg';
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from '@/components/ui/carousel';
import { ourBestCrs } 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] my-[2rem] "
    >
      {/* <h1>Testimonials</h1> */}
      <Carousel className="w-full  pt-8">
        <div className="flex justify-between items-center mb-6 ">
          <h2 className="">Meet our best creators</h2>
          <div className="flex space-x-2 ">
            <CarouselPrevious className="bg-primary-foreground text-primary border-2 border-primary rounded-[9px] md:rounded-[14px] flex items-center justify-center w-10 h-10 md:w-20 md:h-14" />
            <CarouselNext className="bg-primary-foreground text-primary border-2 border-primary 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>
            {ourBestCrs.map((creator, index) => (
              <CarouselItem key={index}>
                <div className=" border-2 rounded-xl bg-white flex flex-col md:flex-row items-center h-full justify-between">
                  <div className="pb-5 md:pb-0">
                    <img draggable="false" src={creator.image} alt="testimonials" />
                  </div>
                  <div className="pl-10 lg:pl-20 md:flex-grow space-y-3 pb-5">
                    <div className="flex pl">
                      <h4 className=" pr-2 text-secondary-light font-inter font-medium">
                        Full Name:
                      </h4>
                      <h4 className=" font-inter font-bold">
                        {creator.fullname}
                      </h4>
                    </div>
                    <div className="flex pl">
                      <h4 className=" pr-2 text-secondary-light font-inter font-medium">
                        Feild:
                      </h4>
                      <h4 className=" font-inter font-bold">{creator.field}</h4>
                    </div>
                    <div className="flex pl">
                      <h4 className=" pr-2 text-secondary-light font-inter font-medium">
                        Courses:
                      </h4>
                      <h4 className=" font-inter font-bold">
                        {creator.courses}
                      </h4>
                    </div>
                    <div className="flex flex-col pl gap-2">
                      <h4 className=" pr-2 text-secondary-light font-inter font-medium">
                        Rating:
                      </h4>
                      <img draggable="false" src={fivestars} alt='stars' className='w-[200px] '/>
                    </div>
                  </div>
                </div>
              </CarouselItem>
            ))}
          </CarouselContent>
        </div>
      </Carousel>
    </motion.section>
  );
}