import React from 'react';
import { LayoutDashboard, History, CreditCard, Dumbbell } from 'lucide-react';

interface MobileNavProps {
    activeTab: string;
    setActiveTab: (tab: any) => void;
    t: any;
}

const MobileNav: React.FC<MobileNavProps> = ({ activeTab, setActiveTab, t }) => {
    return (
        <div className="md:hidden fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 z-50 flex justify-around p-2 pb-safe shadow-lg">
            <button
                onClick={() => setActiveTab('overview')}
                className={`flex flex-col items-center gap-1 p-2 rounded-lg ${activeTab === 'overview' ? 'text-brand-600' : 'text-gray-400'}`}
            >
                <LayoutDashboard size={20} />
                <span className="text-[10px] font-medium">{t.dashboard.menuOverview}</span>
            </button>
            <button
                onClick={() => setActiveTab('history')}
                className={`flex flex-col items-center gap-1 p-2 rounded-lg ${activeTab === 'history' ? 'text-brand-600' : 'text-gray-400'}`}
            >
                <History size={20} />
                <span className="text-[10px] font-medium">{t.dashboard.menuHistory}</span>
            </button>
            <button
                onClick={() => setActiveTab('coach')}
                className={`flex flex-col items-center gap-1 p-2 rounded-lg ${activeTab === 'coach' ? 'text-brand-600' : 'text-gray-400'}`}
            >
                <Dumbbell size={20} />
                <span className="text-[10px] font-medium">Coach AI</span>
            </button>
            <button
                onClick={() => setActiveTab('subscription')}
                className={`flex flex-col items-center gap-1 p-2 rounded-lg ${activeTab === 'subscription' ? 'text-brand-600' : 'text-gray-400'}`}
            >
                <CreditCard size={20} />
                <span className="text-[10px] font-medium">{t.dashboard.menuSubscription}</span>
            </button>
        </div>
    );
};

export default MobileNav;
