// src/components/GlobalNav.jsx
import React from 'react';

export default function GlobalNav({ activePanel, setActivePanel, isNewsMode, setIsNewsMode }) {
    const newsItems = [
        { id: 'world_news', label: 'WORLD NEWS', number: '01' },
        { id: 'euro_news', label: 'EURO NEWS', number: '02' },
        { id: 'america_news', label: 'AMERICA NEWS', number: '03' },
        { id: 'china_japan_news', label: 'CHINA / JAPAN NEWS', number: '04' },
        { id: 'russia_news', label: 'RUSSIA NEWS', number: '05' },
    ];

    const statsItems = [
        { id: 'market_review', label: 'MARKET REVIEW', number: '01' },
        { id: 'next_dollar_currencies', label: 'CURRENCIES', number: '02' },
        { id: 'global_population', label: 'POPULATION', number: '03' },
        { id: 'energy_consumption', label: 'ENERGY', number: '04' },
        { id: 'bix_micex_index', label: 'BIX INDEX / MICEX INDEX', number: '05' },
    ];

    const currentItems = isNewsMode ? newsItems : statsItems;

    const handlePanelClick = (id) => {
        setActivePanel(id);
    };

    return (
        <div className="flex flex-col items-start p-4 z-20 pointer-events-auto text-base-content md:w-64">
            <div className="mb-6 ml-6">
                <span className="text-sm font-semibold uppercase tracking-wider text-gray-200">
                    {isNewsMode ? 'WORLD NEWS' : 'WORLD STATISTICS'}
                </span>
            </div>

            <ul className="menu p-2 w-full bg-base-100 rounded-box shadow-xl">
                {currentItems.map((item) => (
                    <li
                        key={item.id}
                        className={`${activePanel === item.id ? 'active' : ''}`}
                        onClick={() => handlePanelClick(item.id)}
                    >
                        <a className="flex items-center gap-3">
                            <span className={`badge badge-ghost font-bold text-xs w-6 h-6 flex items-center justify-center rounded-full
                                ${activePanel === item.id
                                ? 'badge-primary text-white shadow-lg'
                                : 'bg-transparent text-base-content/70 border border-base-content/50 group-hover:bg-base-300'
                            }`}>
                                {item.number}
                            </span>
                            {/* แก้ไขตรงนี้: ลบ whitespace-nowrap ออก */}
                            <span className="text-sm font-medium uppercase tracking-wide break-words">
                                {item.label}
                            </span>
                        </a>
                    </li>
                ))}
            </ul>

            <div className="tabs tabs-boxed mt-8 shadow-lg bg-base-300">
                <a
                    role="tab"
                    className={`tab transition-all duration-300 ${isNewsMode ? 'tab-active bg-primary text-primary-content' : 'text-base-content'}`}
                    onClick={() => {
                        setIsNewsMode(true);
                        setActivePanel('world_news');
                    }}
                >
                    NEWS
                </a>
                <a
                    role="tab"
                    className={`tab transition-all duration-300 ${!isNewsMode ? 'tab-active bg-primary text-primary-content' : 'text-base-content'}`}
                    onClick={() => {
                        setIsNewsMode(false);
                        setActivePanel('market_review');
                    }}
                >
                    STATISTICS
                </a>
            </div>
        </div>
    );
}