import React from 'react';

type Page = 'permission' | 'rawDownload' | 'check';

interface NavigationProps {
    currentPage: Page;
    setCurrentPage: (page: Page) => void;
}

const Navigation: React.FC<NavigationProps> = ({ currentPage, setCurrentPage }) => {
    const activeClasses = 'bg-indigo-600 text-white';
    const inactiveClasses = 'bg-slate-800 text-slate-300 hover:bg-slate-700';

    return (
        <nav className="flex justify-center mb-8">
            <div className="flex p-1 space-x-1 bg-slate-800/50 border border-slate-700 rounded-lg">
                <button
                    onClick={() => setCurrentPage('permission')}
                    className={`px-4 py-2 text-sm font-medium rounded-md transition-colors duration-200 ${currentPage === 'permission' ? activeClasses : inactiveClasses}`}
                >
                    Cấp quyền TMS
                </button>
                <button
                    onClick={() => setCurrentPage('rawDownload')}
                    className={`px-4 py-2 text-sm font-medium rounded-md transition-colors duration-200 ${currentPage === 'rawDownload' ? activeClasses : inactiveClasses}`}
                >
                    Tải raw & Setting
                </button>
                <button
                    onClick={() => setCurrentPage('check')}
                    className={`px-4 py-2 text-sm font-medium rounded-md transition-colors duration-200 ${currentPage === 'check' ? activeClasses : inactiveClasses}`}
                >
                    Check Upload
                </button>
            </div>
        </nav>
    );
};

export default Navigation;