'use client'

import Link from 'next/link'
import { useRef, useEffect } from 'react'
import { Autoplay, Navigation } from 'swiper/modules'
import { Swiper, SwiperSlide } from 'swiper/react'
import 'swiper/css'
import 'swiper/css/navigation'

const cultureSlides = [
    { image: "/assets/img/home/tamil-culture/tamil-culture-1.webp", icon: "/assets/img/home/icons/music.webp", title: "Instrumental Music", description: "In South Indian or Carnatic music, the vina, a long…", slug: "instrumental-music"},
    { image: "/assets/img/home/tamil-culture/tamil-culture-2.webp", icon: "/assets/img/home/icons/bharatham.webp", title: "Bharatha Natyam Dance", description: "An ancient traditional art form with its origins steeped…",slug: "bharathnatyam-dance"},
    { image: "/assets/img/home/tamil-culture/tamil-culture-3.webp", icon: "/assets/img/home/icons/vocal.webp", title: "Vocal", description: "Carnatic music is considered one of the oldest systems…", slug: "vocal"},
    { image: "/assets/img/home/tamil-culture/tamil-culture-4.webp", icon: "/assets/img/home/icons/jallikattu.webp", title: "Jallikattu", description: "Jallikattu (Tamil: சல்லிகட்டு, challikattu)…", slug: "jallikattu"},
    { image: "/assets/img/home/tamil-culture/tamil-culture-5.webp", icon: "/assets/img/home/icons/entertainment.webp", title: "Entertainment-1", description: "Entertainment-1...", slug: "entertainment"},
    { image: "/assets/img/home/tamil-culture/tamil-culture-6.webp", icon: "/assets/img/home/icons/indoor.webp", title: "Indoor game", description: "Indoor game...", slug: "indoor-game"},
    { image: "/assets/img/home/tamil-culture/tamil-culture-7.webp", icon: "/assets/img/home/icons/silambam.webp", title: "Silambattam", description: "Silambam or Silambattam Tamil: சிலம்பம் அல்லது…", slug: "silambattam"},
]

export default function ArtAndCultureSection() {
    const prevRef = useRef<HTMLButtonElement | null>(null)
    const nextRef = useRef<HTMLButtonElement | null>(null)
    const swiperRef = useRef<any>(null)

    useEffect(() => {
        if (swiperRef.current && swiperRef.current.params) {
            swiperRef.current.params.navigation.prevEl = prevRef.current
            swiperRef.current.params.navigation.nextEl = nextRef.current
            swiperRef.current.navigation.destroy()
            swiperRef.current.navigation.init()
            swiperRef.current.navigation.update()
        }
    }, [])

    return (
        <div className="memory1-section-area sp4">
            <div className="container">
                <div className="row">
                    <div className="col-lg-12 m-auto">
                        <div className="memory-header heading2 space-margin60">
                            <h2 className="text-anime-style-3">Tamil Culture</h2>
                        </div>
                    </div>
                </div>

                <div className="row gx-5">
                    <div className='col-lg-10'>
                        <div className="col-lg-12 memory-slider-area">
                            <Swiper
                                modules={[Autoplay, Navigation]}
                                slidesPerView={3}
                                spaceBetween={30}
                                autoplay={{ delay: 2500, disableOnInteraction: false }}
                                loop={true}
                                navigation={{ prevEl: prevRef.current, nextEl: nextRef.current }}
                                onSwiper={(swiper) => {
                                    swiperRef.current = swiper
                                }}
                                breakpoints={{
                                    320: { slidesPerView: 1, spaceBetween: 30 },
                                    575: { slidesPerView: 2, spaceBetween: 30 },
                                    767: { slidesPerView: 2, spaceBetween: 30 },
                                    991: { slidesPerView: 2, spaceBetween: 30 },
                                    1199: { slidesPerView: 3, spaceBetween: 30 },
                                    1350: { slidesPerView: 3, spaceBetween: 30 },
                                }}
                                className="owl-carousel"
                            >
                                {cultureSlides.map((slide, idx) => (
                                    <SwiperSlide className="memory-boxarea" key={idx}>
                                        <div className="img1 image-anime">
                                            <img src={slide.image} alt={slide.title} />
                                        </div>
                                        <div className="content-area">
                                            <img src={slide.icon} alt={`${slide.title} Icon`} className="logo1 keyframe5" />
                                            <div className="arrow">
                                                <Link href={slide.slug}><i className="fa-solid fa-arrow-right" /></Link>
                                            </div>
                                            <div className="space18" />
                                            <p>{slide.title}</p>
                                            <div className="space12" />
                                            <Link href={`/tamil-culture-post?slug=${slide.slug}`}>{slide.description}</Link>
                                        </div>
                                    </SwiperSlide>
                                ))}
                            </Swiper>

                            <div className="owl-nav" style={{ position: "absolute", top: "-80px", right: "90px" }}>
                                <button ref={prevRef} type="button" role="presentation" className="owl-prev h1p" aria-label="Previous Slide">
                                    <i className="fa-solid fa-angle-left" />
                                </button>
                                <button ref={nextRef} type="button" role="presentation" className="owl-next h1n" aria-label="Next Slide">
                                    <i className="fa-solid fa-angle-right" />
                                </button>
                            </div>
                        </div>
                    </div>

                    <div className='col-lg-2'>
                        <div className="memory-boxarea pl-3">
                            <div className="img1" data-aos="zoom-in" data-aos-duration={1000}>
                                <img src="/assets/img/home/ad-banner/ad.webp" alt="Festival Poster" style={{ height: "500px", width: "100%" }} />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}