'use client'

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

const testimonials = testimonialData

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}>
            <div className={styles.smallHeading} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '10px' }}>
                <Image src="/images/dinner.png" alt="Antalya Dinner Icon" width={24} height={24} />
                <span>ANTALYA</span>
                <Image src="/images/eat.png" alt="Antalya Cutlery Icon" width={24} height={24} />
            </div>
            <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.testimonialText}>"{item.text}"</p>
                        <div style={{ fontSize: '1.5rem', color: '#ffdf00', textAlign: 'center', letterSpacing: '3px', marginTop: '20px' }}>
                            {'★★★★★'}
                        </div>
                    </div>
                ))}

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

            <div className={styles.buttonContainer}>
                <a
                    href="https://www.google.com/search?sca_esv=fb3147f266a54277&sxsrf=AE3TifPK9lVB_UK5Mt9ko4Ht65w63RgqUQ:1764431326889&si=AMgyJEtREmoPL4P1I5IDCfuA8gybfVI2d5Uj7QMwYCZHKDZ-E3A-qenJpQm2J1V3Wa6_UKYzIQhT0idJrAopWIgZ0RiDDHrNP0RtPpfTzWgU2637exPDNkEZu0WuVN4TEdgoYqqtQwcWsOUIFi4JvvmrZPyybRzrcg%3D%3D&q=Antalya+Turkish+Restaurant+Reviews&sa=X&ved=2ahUKEwic4uDz2peRAxUbTmwGHWwWBRoQ0bkNegQIJRAE&biw=1528&bih=786&dpr=1.25&zx=1764431335803&no_sw_cr=1#lrd=0x882bf532910f4e25:0x4aee10507689253d,3,,,,"
                    target="_blank"
                    rel="noopener noreferrer"
                    className={styles.button}
                >
                    Review Us on Google
                </a>
            </div>
        </section>
    )
}