'use client'
import Link from 'next/link'
import { useState } from "react"
import { events } from "@/utility/constant.utils" // import your events array

export default function HomeUpcomingEvent() {
    const [isTab, setIsTab] = useState(1)
    const handleTab = (i: number) => {
        setIsTab(i)
    }

    // Take only the first 3 events
    const displayEvents = events.slice(0, 3);

    return (
        <>

            <div className="event3-section-area">
                <div className="container">
                    <div className="row">
                        <div className="col-lg-12 m-auto">
                            <div className="event2-header heading5 space-margin60">
                                <h2 className="text-anime-style-3">Events</h2>
                            </div>
                        </div>
                    </div>
                    <div className="row gx-5">
                        <div className="col-lg-10" data-aos="fade-up" data-aos-duration={1000}>
                            <div className="tab-content" id="pills-tabContent">
                                <div className={isTab == 1 ? "tab-pane fade show active" : "tab-pane fade"} id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab" tabIndex={0}>
                                    <div className="event-widget-area">

                                        {displayEvents.map((event, idx) => (
                                            <div key={event.id}>
                                                {idx > 0 && <div className={idx === 2 ? "space30" : "space48"} />}
                                                <div className="row">
                                                    <div className="col-lg-12 m-auto">
                                                        <div className="event2-boxarea box1">
                                                            <h1 className="active">{String(idx + 1).padStart(2, "0")}</h1>
                                                            <div className="row align-items-center">
                                                                {/* Alternating layout */}
                                                                {idx % 2 === 0 ? (
                                                                    <>
                                                                        <div className="col-lg-5">
                                                                            <div className="img1">
                                                                                <img src={event.image} alt={event.title} />
                                                                            </div>
                                                                        </div>
                                                                        <div className="col-lg-1" />
                                                                        <div className="col-lg-6">
                                                                            <div className="content-area">
                                                                                <ul>
                                                                                    <li>
                                                                                        <Link href={event.url || "#"}>
                                                                                            <span className='d-flex g-3 metered-data align-items-end'>
                                                                                                <img src="/assets/img/icons/clock1.svg" alt="" />
                                                                                                {event.time ? event.time + " - " : ""}{event.date}<span> | </span>
                                                                                            </span>
                                                                                        </Link>
                                                                                    </li>
                                                                                    <li>
                                                                                        <Link href={event.url || "#"}>
                                                                                            <span className='d-flex g-3 metered-data align-items-end'>                                                                                            <img src="/assets/img/icons/location1.svg" alt="" />{event.location}
                                                                                            </span>

                                                                                        </Link>
                                                                                    </li>
                                                                                </ul>
                                                                                <div className="space20" />
                                                                                <Link href={event.link || "#"} className="head">{event.title}</Link>
                                                                                <div className="space24" />
                                                                                <p
                                                                                    style={{
                                                                                        display: '-webkit-box',
                                                                                        WebkitLineClamp: 1,
                                                                                        WebkitBoxOrient: 'vertical',
                                                                                        overflow: 'hidden',
                                                                                        textOverflow: 'ellipsis',
                                                                                    }}
                                                                                >
                                                                                    {event.desc}
                                                                                </p>
                                                                                <div className="space24" />
                                                                                <div className="btn-area1">
                                                                                    <Link href={event.url || "#"} target="_blank" rel="noopener noreferrer" className="vl-btn3">
                                                                                        <span className="demo">{event.btnText || "purchase ticket"}</span>
                                                                                    </Link>
                                                                                </div>

                                                                            </div>
                                                                        </div>
                                                                    </>
                                                                ) : (
                                                                    <>
                                                                        <div className="col-lg-6 order-2 order-lg-1">
                                                                            <div className="content-area">
                                                                                <ul>
                                                                                    <li>
                                                                                        <Link href={event.url || "#"}>
                                                                                            <span className='d-flex g-3 metered-data align-items-end'>
                                                                                                <img src="/assets/img/icons/clock1.svg" alt="" />
                                                                                                {event.time ? event.time + " - " : ""}{event.date}<span> | </span>
                                                                                            </span>
                                                                                        </Link>
                                                                                    </li>
                                                                                    <li>
                                                                                        <Link href={event.url || "#"}>
                                                                                            <span className='d-flex g-3 metered-data align-items-end'>                                                                                            <img src="/assets/img/icons/location1.svg" alt="" />{event.location}
                                                                                            </span>

                                                                                        </Link>
                                                                                    </li>
                                                                                </ul>
                                                                                <div className="space20" />
                                                                                <Link href={event.link || "#"} className="head">{event.title}</Link>
                                                                                <div className="space24" />
                                                                                <p
                                                                                    style={{
                                                                                        display: '-webkit-box',
                                                                                        WebkitLineClamp: 1,
                                                                                        WebkitBoxOrient: 'vertical',
                                                                                        overflow: 'hidden',
                                                                                        textOverflow: 'ellipsis',
                                                                                    }}
                                                                                >
                                                                                    {event.desc}
                                                                                </p>
                                                                                <div className="space24" />
                                                                                <div className="btn-area1">
                                                                                    <Link href={event.url || "#"} target="_blank" rel="noopener noreferrer" className="vl-btn3">
                                                                                        <span className="demo">{event.btnText || "purchase ticket"}</span>
                                                                                    </Link>
                                                                                </div>

                                                                            </div>
                                                                            <div className="space30 d-lg-none d-block" />
                                                                        </div>
                                                                        <div className="col-lg-5 order-1 order-lg-2">
                                                                            <div className="img1">
                                                                                <img src={event.image} alt={event.title} />
                                                                            </div>
                                                                        </div>
                                                                    </>
                                                                )}
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        ))}

                                    </div>
                                </div>
                            </div>
                        </div>

                        <div className='col-lg-2 ad-banner'>
                            <div className="memory-boxarea pl-3">
                                <div className="img1" data-aos="zoom-in" data-aos-duration={1000} >
                                    <img src="/assets/img/home/ad-banner/upcoming-events-ad.webp" alt="" className='mb-3' />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </>
    )
}