'use client'

import { useState, useEffect } from 'react'
import Image from 'next/image'
import styles from './Testimonials.module.css'

const testimonials = [
    {
        id: 1,
        name: 'Anya Petrova',
        image: '/images/avatar-anya.png',
        text: '"An unforgettable journey of flavors and warmth. The ambiance is exquisite and the Turkish fusion dishes are simply divine."',
        rating: 5
    },
    {
        id: 2,
        name: 'Tuest Khan',
        image: '/images/avatar-tuest.png',
        text: '"The best Turkish restaurant in town! Every dish is prepared with authentic spices and love. The staff made us feel like family."',
        rating: 5
    },
    {
        id: 3,
        name: 'Tariq Ahmed',
        image: '/images/avatar-tariq.png',
        text: '"Exceptional quality and presentation. The kebabs were perfectly grilled and the baklava for dessert was heavenly!"',
        rating: 5
    },
    {
        id: 4,
        name: 'Sarah Jenkins',
        image: '/images/avatar-sarah.png',
        text: '"Amazing service and beautiful atmosphere. The mixed grill platter is a must-try. Highly recommend for special occasions!"',
        rating: 5
    },
    {
        id: 5,
        name: 'Michael Chen',
        image: '/images/avatar-michael.png',
        text: '"A hidden gem! The fusion of traditional Turkish flavors with modern techniques is incredible. Will definitely come back soon."',
        rating: 5
    },
    {
        id: 6,
        name: 'Emily Davis',
        image: '/images/avatar-emily.png',
        text: '"The staff was so welcoming and the food was absolutely delicious. From appetizers to dessert, everything was perfect. 10/10 experience!"',
        rating: 5
    }
]

export default function Testimonials() {
    const [currentIndex, setCurrentIndex] = useState(0)

    const nextSlide = () => {
        setCurrentIndex((prev) => (prev + 1) % (testimonials.length - 2))
    }

    const prevSlide = () => {
        setCurrentIndex((prev) => (prev === 0 ? testimonials.length - 3 : prev - 1))
    }

    // Auto-slide effect
    useEffect(() => {
        const interval = setInterval(() => {
            nextSlide()
        }, 5000) // Change slide every 5 seconds

        return () => clearInterval(interval)
    }, [])

    // Get the 3 visible testimonials
    const getVisibleTestimonials = () => {
        const items = []
        for (let i = 0; i < 3; i++) {
            const index = (currentIndex + i) % testimonials.length
            items.push(testimonials[index])
        }
        return items
    }

    const visibleItems = getVisibleTestimonials()

    return (
        <section className={styles.section}>
            <h2 className={styles.title}>TESTIMONIALS</h2>

            <div className={styles.sliderContainer}>
                <button className={`${styles.arrow} ${styles.prevArrow}`} onClick={prevSlide}>←</button>

                {visibleItems.map((item) => (
                    <div key={item.id} className={styles.card}>
                        <div className={styles.avatarContainer}>
                            <div className={styles.avatar} style={{ overflow: 'hidden' }}>
                                <div className={styles.authorImageWrapper}>
                                    <Image
                                        src={item.image}
                                        alt={item.name}
                                        fill
                                        className={styles.authorImage}
                                    />
                                </div>
                            </div>
                        </div>
                        <h3 className={styles.name}>— {item.name}</h3>
                        <p className={styles.text}>{item.text}</p>
                        <div className={styles.stars}>
                            {'★'.repeat(item.rating)}
                        </div>
                    </div>
                ))}

                <button className={`${styles.arrow} ${styles.nextArrow}`} onClick={nextSlide}>→</button>
            </div>
        </section>
    )
}