import { Link } from "react-router-dom"
import useStore from "../store/useStore.js"

function Navbar({ isLoggedIn, authUser }) {
    const { logout, authRole } = useStore((state) => state);

    const isReceptionist = authRole === "receptionist";
    const isDoctor = authRole === "doctor";

    return (
        <nav className="bg-gradient-to-r from-blue-600 to-blue-800 shadow-lg">
            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div className="flex items-center justify-between h-16">
                    <div className="flex items-center">
                        <Link to="/" className="text-white font-bold text-xl">
                            King Faisar Hospital
                        </Link>
                    </div>
                    <div className="hidden md:block">
                        <div className="ml-10 flex items-baseline space-x-4">
                            {isLoggedIn ? (
                                <>
                                    <Link
                                        to="/home"
                                        className="text-white hover:bg-blue-700 px-3 py-2 rounded-md text-sm font-medium transition-colors"
                                    >
                                        Home
                                    </Link>

                                    {isReceptionist && (
                                        <>
                                            <Link
                                                to="/patient"
                                                className="text-white hover:bg-blue-700 px-3 py-2 rounded-md text-sm font-medium transition-colors"
                                            >
                                                Patients
                                            </Link>
                                            <Link
                                                to="/appointment"
                                                className="text-white hover:bg-blue-700 px-3 py-2 rounded-md text-sm font-medium transition-colors"
                                            >
                                                Appointments
                                            </Link>
                                        </>
                                    )}

                                    {isDoctor && (
                                        <Link
                                            to="/medical-report"
                                            className="text-white hover:bg-blue-700 px-3 py-2 rounded-md text-sm font-medium transition-colors"
                                        >
                                            Medical Reports
                                        </Link>
                                    )}

                                    <Link
                                        to="/report"
                                        className="text-white hover:bg-blue-700 px-3 py-2 rounded-md text-sm font-medium transition-colors"
                                    >
                                        Reports
                                    </Link>

                                    <button
                                        onClick={() => logout()}
                                        className="text-white hover:bg-red-600 px-3 py-2 rounded-md text-sm font-medium transition-colors"
                                    >
                                        Logout
                                    </button>

                                    <span className="text-blue-200 text-sm ml-4">
                                        {authUser} ({authRole})
                                    </span>
                                </>
                            ) : (
                                <>
                                    <Link
                                        to="/login"
                                        className="text-white hover:bg-blue-700 px-3 py-2 rounded-md text-sm font-medium transition-colors"
                                    >
                                        Login
                                    </Link>
                                    <Link
                                        to="/register"
                                        className="text-white hover:bg-blue-700 px-3 py-2 rounded-md text-sm font-medium transition-colors"
                                    >
                                        Register
                                    </Link>
                                </>
                            )}
                        </div>
                    </div>
                </div>
            </div>
        </nav>
    )
}

export default Navbar