'use client'

import { useState, useEffect } from 'react'
import Image from 'next/image'
import Link from 'next/link'
import styles from './Blogs.module.css'
import { blogData } from '@/utils/constant'

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

    const nextSlide = () => {
        setCurrentIndex((prev) => (prev + 1) % blogData.length)
    }

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

    // Auto-slide effect
    useEffect(() => {
        const interval = setInterval(() => {
            setCurrentIndex((prev) => (prev + 1) % blogData.length)
        }, 5000) // Change slide every 5 seconds

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

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

    const visibleItems = getVisibleBlogs()

    return (
        <section className={styles.section} id="blog">
            <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>TASTE JOURNAL</span>
                <Image src="/images/eat.png" alt="Antalya Cutlery Icon" width={24} height={24} />
            </div>
            <h2 className={styles.title}>Our Blogs</h2>

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

                {visibleItems.map((blog) => (
                    <div key={blog.id} className={styles.card}>
                        <div className={styles.imageContainer}>
                            <Image
                                src={blog.imageDetail}
                                alt={blog.title}
                                fill
                                style={{ objectFit: 'cover' }}
                            />
                        </div>
                        <h3 className={styles.blogTitle}>{blog.title}</h3>
                        <p className={styles.excerpt}>{blog.para}</p>
                        <Link href={`/antalya-turkish-food-blog/${blog.slug}`} className={styles.button}>
                            View More
                        </Link>
                    </div>
                ))}

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

            <div className={styles.viewMoreContainer}>
                <Link href="/antalya-turkish-food-blog" className={styles.viewMoreButton}>
                    Read More Blogs
                </Link>
            </div>
        </section>
    )
}