'use client'
import React from "react";
import { Star } from "lucide-react";
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@/components/ui/carousel";
import { Card, CardContent } from "@/components/ui/card";
import { testimonials } from "@/utils";
import Image from "next/image";
import { motion } from "framer-motion";

const TestimonialCard = ({ testimonial }) => (
  <motion.div
    whileHover={{ y: -5 }}
    transition={{ type: "spring", stiffness: 300 }}
  >
    <Card className="h-full bg-card shadow-lg hover:shadow-xl transition-shadow duration-300 rounded-lg overflow-hidden border-none">
      <CardContent className="p-6 flex flex-col justify-between h-full">
        <div>
          <div className="flex justify-between items-center mb-4">
            <div className="flex">
              {[...Array(5)].map((_, i) => (
                <Star
                  key={i}
                  size={18}
                  className={
                    i < testimonial.rating ? "text-yellow-400" : "text-gray-300"
                  }
                  fill={i < testimonial.rating ? "currentColor" : "none"}
                />
              ))}
            </div>
            <span className="text-sm text-muted-foreground">
              {testimonial.daysAgo} days ago
            </span>
          </div>
          <p className="text-foreground text-lg leading-relaxed mb-6">
          &quot;{testimonial.review}&quot;
          </p>
        </div>
        <div className="flex items-center">
          <div className="relative w-12 h-12 mr-4">
            <Image
              src={testimonial.profileImg || "/placeholder.svg"}
              alt={testimonial.name}
              layout="fill"
              objectFit="cover"
              className="rounded-full"
            />
          </div>
          <div>
            <p className="font-semibold text-foreground">{testimonial.name}</p>
            <p className="text-sm text-muted-foreground">
              {testimonial.location || "Verified Customer"}
            </p>
          </div>
        </div>
      </CardContent>
    </Card>
  </motion.div>
);

const TestimonialCarousel = () => {
  return (
    <section className="bg-gradient-to-b from-background to-secondary/10 py-20 md:py-32">
      <div className="container mx-auto px-4">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6 }}
          className="text-center mb-12"
        >
          <h2 className="text-3xl md:text-5xl font-bold text-foreground mb-4">
            Transformative Experiences with Gupta Rudraksha
          </h2>
          <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
            Discover how our sacred beads have touched lives -
            <a
              href="#all-testimonials"
              className="text-primary hover:underline"
            >
              See All Testimonials
            </a>
          </p>
        </motion.div>

        <Carousel
          opts={{
            align: "start",
          }}
          className="w-full"
        >
          <CarouselContent className="-ml-2 md:-ml-4">
            {testimonials.map((testimonial, index) => (
              <CarouselItem
                key={testimonial.id}
                className="pl-2 md:pl-4 md:basis-1/2 lg:basis-1/3"
              >
                <div className="p-1">
                  <TestimonialCard testimonial={testimonial} />
                </div>
              </CarouselItem>
            ))}
          </CarouselContent>
          <div className="flex justify-center mt-8">
            <CarouselPrevious className="mr-2 bg-primary text-primary-foreground hover:bg-primary/90" />
            <CarouselNext className="ml-2 bg-primary text-primary-foreground hover:bg-primary/90" />
          </div>
        </Carousel>
      </div>
    </section>
  );
};

export default TestimonialCarousel;