import React from "react";
// Assuming the following components are defined elsewhere and available for import
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselPrevious,
  CarouselNext,
} from "@/components/ui/carousel";
import { Star } from "lucide-react";
import { Button } from "@/components/ui/button";

// A simple utility to combine Tailwind CSS classes.
const cn = (...classNames) => classNames.filter(Boolean).join(" ");

// Testimonial data for the carousel items.
const testimonials = [
  {
    text: "A very professional team, good ideas and design, keeping my house clean and tidy, focused on details, finished on time, really impressed, highly recommended!",
    author: "Ali R",
    location: "Rose Bay, NSW",
  },
  {
    text: "Leo is really smart and good sense of humour. Nice design me and my daughter loved so much, we were surprised and didn't expect a male builder to understand women's needs so much. Very well done.",
    author: "Luke W",
    location: "Bondi, NSW",
  },
  {
    text: "Leo and his team renovated our bathroom, they are very clean and tidy. Leo is a very picky person, he gave us a peace of mind through the whole process, I am highly recommending Focux.",
    author: "Johnson S",
    location: "Crows Nest, NSW",
  },
];

// Helper component to render the star rating.
const StarRating = ({ rating = 5 }) => {
  return (
    <div className="flex space-x-1 text-yellow-400">
      {[...Array(5)].map((_, i) => (
        <Star
          key={i}
          className={cn(
            "h-5 w-5",
            i < rating ? "fill-current" : "text-gray-300"
          )}
        />
      ))}
    </div>
  );
};

// Main App component containing the hero section and testimonials.
export default function App() {
  return (
    <section className="py-16 bg-gray-100">
      <div className="container mx-auto px-4 md:px-8 max-w-7xl">
        <h2 className="text-center text-3xl md:text-5xl font-bold mb-12 text-gray-900">
          What Our Clients Say
        </h2>
        <Carousel
          className="w-full"
          opts={{
            align: "start",
            loop: true,
          }}
        >
          <CarouselContent className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
            {testimonials.map((testimonial, index) => (
              <CarouselItem
                key={index}
                className="p-8 flex flex-col gap-4 bg-white rounded-lg shadow-none"
              >
                <StarRating />
                <p className="text-gray-700 leading-relaxed">
                  {testimonial.text}
                </p>
                <div className="mt-auto pt-4 border-t border-gray-300">
                  <p className="font-semibold text-gray-800">
                    {testimonial.author}
                  </p>
                  <p className="text-sm text-gray-500">
                    {testimonial.location}
                  </p>
                </div>
              </CarouselItem>
            ))}
          </CarouselContent>
          {/* You would have CarouselPrevious and CarouselNext components here */}
        </Carousel>
      </div>
    </section>
  );
}
