'use client'
import { useState } from 'react'
import Layout from "@/components/layout/Layout"
import Link from 'next/link'
import { menuData } from '@/utils/constant.utils'

export default function MenusClient() {
    const [activeTab, setActiveTab] = useState('Wings')
    const tabs = Object.keys(menuData)
    const menuItems = menuData[activeTab] || []

    // Split items into two columns
    const mid = Math.ceil(menuItems.length / 2)
    const firstHalf = menuItems.slice(0, mid)
    const secondHalf = menuItems.slice(mid)

    return (
        <>
            <Layout
                headerStyle={2}
                footerStyle={2}
                breadcrumbTitle="Our Menu"
                bgImage={"/assets/images/inner-banner/menu-banner.webp"}
            >
                {/* Menu Section */}
                <section className="menus-section sec-pad" id="menu">
                    <div className="auto-container">
                        {/* Section Title */}
                        <div className="sec-title mb-3 centered">
                            <div className="title">Our Menu</div>
                            <h2>Explore Our Delicious Dishes</h2>
                            <div className="separate"></div>
                        </div>

                        {/* Tabs */}
                        <ul className="nav nav-tabs justify-content-center mb-5 border-0">
                            {tabs.map((tab) => (
                                <li
                                    key={tab}
                                    className="nav-item"
                                    onClick={() => setActiveTab(tab)}
                                    style={{ cursor: 'pointer' }}
                                >
                                    <span
                                        className={`nav-link ${activeTab === tab ? 'active fw-bold' : ''}`}
                                        style={activeTab === tab ? { color: '#cf2d1f' } : {}}
                                    >
                                        {tab}
                                    </span>
                                </li>
                            ))}
                        </ul>

                        {/* Menu Items */}
                        <div className="row clearfix">
                            {/* Left Column */}
                            <div className="menu-column col-lg-6 col-md-12 col-sm-12">
                                <div className="inner-column">
                                    {firstHalf.map((item, index) => (
                                        <div className="menu-block" key={index}>
                                            <div className="inner-box">
                                                <div className="menu-image">
                                                    <Link href="/#">
                                                        <img src={item.img} alt={item.alt} />
                                                    </Link>
                                                </div>
                                                <h3>
                                                    <Link href="/#">{item.name}</Link>
                                                </h3>
                                                <div className="title">{item.desc}</div>
                                                <div className="price-box">
                                                    <span className="price">${item.price}</span>
                                                </div>
                                            </div>
                                        </div>
                                    ))}
                                </div>
                            </div>

                            {/* Right Column */}
                            <div className="menu-column col-lg-6 col-md-12 col-sm-12">
                                <div className="inner-column">
                                    {secondHalf.map((item, index) => (
                                        <div className="menu-block" key={index}>
                                            <div className="inner-box">
                                                <div className="menu-image">
                                                    <Link href="/#">
                                                        <img src={item.img} alt={item.alt} />
                                                    </Link>
                                                </div>
                                                <h3>
                                                    <Link href="/#">{item.name}</Link>
                                                </h3>
                                                <div className="title">{item.desc}</div>
                                                <div className="price-box">
                                                    <span className="price">${item.price}</span>
                                                </div>
                                            </div>
                                        </div>
                                    ))}
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            </Layout>
        </>
    )
}