import { History as HistoryIcon, LogIn, LogOut, Gamepad2, Wind, Cat } from 'lucide-react';
import type { View } from '../App';

interface NavbarProps {
    onNavigate: (view: View) => void;
    isAuthenticated: boolean;
    onLogout: () => void;
}

export const Navbar = ({ onNavigate, isAuthenticated, onLogout }: NavbarProps) => (
    <nav className="max-w-5xl mx-auto py-4 px-4 flex items-center justify-between gap-4">
        {/* LEWA STRONA: Przycisk Home w stylu Kitty */}
        <button
            onClick={() => onNavigate('home')}
            className="flex items-center gap-2 px-4 py-2 bg-pink-500 hover:bg-pink-600 rounded-full font-black text-white transition-all active:scale-95 shadow-lg shadow-pink-200"
        >
            <Cat size={20} fill="currentColor" />
            <span className="text-lg tracking-tighter">KittyURL</span>
        </button>

        {/* PRAWA STRONA: Pozostałe przyciski zgrupowane w divie */}
        <div className="flex flex-wrap justify-end gap-2 sm:gap-3">
            {/* Przycisk Jump Game */}
            <button
                onClick={() => onNavigate('jump-game')}
                className="flex items-center gap-2 px-3 py-2 sm:px-4 bg-pink-100 hover:bg-pink-200 rounded-full font-bold text-pink-600 transition-all active:scale-95 text-sm sm:text-base"
            >
                <Gamepad2 size={18} />
                <span className="hidden md:inline">Jump</span>
            </button>

            {/* Przycisk Flappy Cat */}
            <button
                onClick={() => onNavigate('flappy-game')}
                className="flex items-center gap-2 px-3 py-2 sm:px-4 bg-blue-100 hover:bg-blue-200 rounded-full font-bold text-blue-600 transition-all active:scale-95 text-sm sm:text-base"
            >
                <Wind size={18} />
                <span className="hidden md:inline">Flappy</span>
            </button>

            {/* Przycisk History */}
            <button
                onClick={() => onNavigate('history')}
                className="flex items-center gap-2 px-3 py-2 sm:px-4 bg-white rounded-full font-bold text-pink-500 border border-pink-100 transition-all active:scale-95 text-sm sm:text-base"
            >
                <HistoryIcon size={18} />
                <span className="hidden md:inline">History</span>
            </button>

            {/* Logowanie / Wylogowanie */}
            {isAuthenticated ? (
                <button
                    onClick={() => {
                        onLogout();
                        onNavigate('home');
                    }}
                    className="flex items-center gap-2 px-3 py-2 sm:px-4 bg-pink-50 hover:bg-pink-100 rounded-full font-bold text-pink-500 border-2 border-pink-200 transition-all active:scale-95 text-sm sm:text-base"
                >
                    <LogOut size={18} />
                    <span className="hidden md:inline">Logout</span>
                </button>
            ) : (
                <button
                    onClick={() => onNavigate('login')}
                    className="flex items-center gap-2 px-4 py-2 bg-pink-500 hover:bg-pink-600 rounded-full font-bold text-white transition-all active:scale-95 text-sm sm:text-base shadow-lg shadow-pink-200"
                >
                    <LogIn size={18} />
                    <span className="hidden sm:inline">Sign In</span>
                </button>
            )}
        </div>
    </nav>
);