'use client';
import { useState } from 'react';
import Link from 'next/link';
import { menuData } from '@/utils/constant.utils';

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

    const visibleItems = menuItems.slice(0, 6);

    const mid = Math.ceil(visibleItems.length / 2);
    const firstHalf = visibleItems.slice(0, mid);
    const secondHalf = visibleItems.slice(mid);

    return (
        <section className="menus-section" id="menu">
            <div className="auto-container">
                {/* Section Title */}
                <div className="sec-title mb-3 centered">
                    <div className="title">Our Menu</div>
                    <h2>Menus</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 in Two Columns */}
                <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 className="btns-box text-center mt-4">
                    <Link
                        href="/menu"
                        className="theme-btn btn-style-one clearfix"
                    >
                        <span className="icon"></span> View All Menu
                    </Link>
                </div>
            </div>
        </section>
    );
}