'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] || [];

    // Split the array into 2 halves
    const mid = Math.ceil(menuItems.length / 2);
    const firstHalf = menuItems.slice(0, mid);
    const secondHalf = menuItems.slice(mid);

    return (
        <section className="menus-section" id="menu">
            {/* <div
        className="pattern-layer"
        style={{ backgroundImage: 'url(assets/images/background/4.jpg)' }}
      ></div> */}
            <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 text-primary' : ''}`}
                            >
                                {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="/menu">
                                                <img src={item.img} alt={item.name} />
                                            </Link>
                                        </div>
                                        <h6>
                                            <Link href="/menu">{item.name}</Link>
                                        </h6>
                                        <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="/menu">
                                                <img src={item.img} alt={item.name} />
                                            </Link>
                                        </div>
                                        <h6>
                                            <Link href="/menu">{item.name}</Link>
                                        </h6>
                                        <div className="title">{item.desc}</div>
                                        <div className="price-box">
                                            <span className="price">${item.price}</span>
                                        </div>
                                    </div>
                                </div>
                            ))}
                        </div>
                    </div>
                </div>
            </div>
        </section>
    );
}