'use client';

import localFont from "next/font/local";
import { useState } from "react";
import { ChevronLeft, ChevronRight, Star } from "lucide-react";

const figtree = localFont({
    src: [
        {
            path: '../../../public/Fonts/figtree/figtree.ttf',
        },
    ],
})

interface Review {
    name: string;
    date: string;
    rating: number;
    text: string;
}

const reviews: Review[] = [
    {
        name: "Ayesha Malik",
        date: "October 2025",
        rating: 4.81,
        text: "Clean apartment in great location Positive: Nice apartment in a highly walkable location. We took the river walk to most of the main attractions, which was a scenic 20 minute walk full of outdoor restaurants that we really enjoyed. The apartment was clean and spacious. Highly recommend",
    },
    {
        name: "Hassan Bilal",
        date: "October 2025",
        rating: 4.81,
        text: "The place is great. All the appliances, furniture and bathroom fittings were new. Lots of crockery and cutlery making it very easy for us. Very accessible apartment and a lift is a great plus given that the apartment is on the 4th floor. The mattresses were just great...very comfortable. I highly recommend the place. Thank you Mai.",
       
    },
    {
        name: "Javed Ali",
        date: "October 2025",
        rating: 4.81,
        text: "I was traveling with my wife. We spent a couple of nights there. I totally recommend the apartment. It has everything one needs - utensils, kitchenware etc. Extremely clean. New. I had a feeling that we are the first guests there. Was really nice to come back to this cozy light apartment. Thanks to the great host :)",
       
    },
    {
        name: "Sarah Raza",
        date: "October 2025",
        rating: 4.75,
        text: "Amazing stay! The apartment exceeded our expectations. Great location, modern amenities, and the host was very responsive. Would definitely stay here again!",
       
    },
    {
        name: "Shakeel Ahmed",
        date: "October 2025",
        rating: 4.90,
        text: "Perfect apartment for our city break. Everything was spotless and well-maintained. The neighborhood is quiet yet close to all attractions. Highly recommended!"
       
    }
];

function Review() {
    const [currentIndex, setCurrentIndex] = useState(0);
    const reviewsPerPage = 3;
    const totalPages = Math.ceil(reviews.length / reviewsPerPage);

    const nextSlide = () => {
        setCurrentIndex((prev) => (prev + 1) % totalPages);
    };

    const prevSlide = () => {
        setCurrentIndex((prev) => (prev - 1 + totalPages) % totalPages);
    };

    const getCurrentReviews = () => {
        const start = currentIndex * reviewsPerPage;
        return reviews.slice(start, start + reviewsPerPage);
    };

    return (
        <section className={`${figtree.className} bg-[#E7FE78] py-16 px-4 md:px-8 lg:px-16 relative overflow-hidden`}>

            <div className="max-w-7xl mx-auto">
                {/* Header */}
                <div className="text-center mb-12">
                    <h2 className="text-4xl md:text-5xl font-medium text-black mb-4">
                        What others have to say<br />about us
                    </h2>
                    <p className="text-lg text-black max-w-2xl mx-auto">
                        We have not only earned the trust of our customers but also of our highly valued service providers.
                    </p>
                </div>

                {/* Reviews Carousel */}
                <div className="relative">
                    {/* Navigation Buttons */}
                    <button
                        onClick={prevSlide}
                        className="absolute left-0 top-1/2 -translate-y-1/2 -translate-x-4 lg:-translate-x-12 z-10 bg-white rounded-full p-3 shadow-lg hover:shadow-xl transition-shadow"
                        aria-label="Previous reviews"
                    >
                        <ChevronLeft className="w-6 h-6 text-black" />
                    </button>

                    <button
                        onClick={nextSlide}
                        className="absolute right-0 top-1/2 -translate-y-1/2 translate-x-4 lg:translate-x-12 z-10 bg-white rounded-full p-3 shadow-lg hover:shadow-xl transition-shadow"
                        aria-label="Next reviews"
                    >
                        <ChevronRight className="w-6 h-6 text-black" />
                    </button>

                    {/* Reviews Grid */}
                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 px-4">
                        {getCurrentReviews().map((review, index) => (
                            <div
                                key={`${review.name}-${review.date}-${index}`}
                                className="bg-white p-6 border border-black border-2"
                            >
                                {/* Header */}
                                <div className="flex justify-between items-start mb-2">
                                    <div>
                                        <h3 className="font-bold text-xl text-black">{review.name}</h3>
                                        <p className="text-sm text-gray-600">{review.date}</p>
                                    </div>
                                    <div className="flex items-center gap-1">
                                        <Star className="w-5 h-5 fill-black text-black" />
                                        <span className="font-semibold text-black">{review.rating}</span>
                                    </div>
                                </div>

                                {/* Review Text */}
                                <p className="text-gray-800 text-sm leading-relaxed mb-4">
                                    {review.text}
                                </p>
                            </div>
                        ))}
                    </div>
                </div>

                {/* Pagination Dots */}
                <div className="flex justify-center gap-2 mt-8">
                    {Array.from({ length: totalPages }).map((_, index) => (
                        <button
                            key={index}
                            onClick={() => setCurrentIndex(index)}
                            className={`w-2 h-2 rounded-full transition-all ${
                                index === currentIndex
                                    ? 'bg-black w-3 h-3'
                                    : 'bg-gray-400'
                            }`}
                            aria-label={`Go to page ${index + 1}`}
                        />
                    ))}
                </div>
            </div>
        </section>
    )
}

export default Review;