 import { Link } from "react-router-dom";

function Dashboard(){
    const handlogout = async() => {
        localStorage.removeItem('user')
        window.location.href = "/login"
    }
    return(
       <div className="min-h-screen bg-amber-200 p-6 flex flex-col gap-6 font-sans">
        {/* Title */}
        <h2 className="text-3xl font-bold text-gray-900">Dashboard</h2>
        
        {/* Links Container - Stacks links vertically with spacing */}
        <div className="flex flex-col gap-3">
            <Link to="/fees" className="text-lg font-medium text-gray-800 hover:text-orange-600 transition-colors">
                <h3>Fees</h3>
            </Link>
            <Link to="/payments" className="text-lg font-medium text-gray-800 hover:text-orange-600 transition-colors">
                <h3>Payments</h3>
            </Link>
            <Link to="/records" className="text-lg font-medium text-gray-800 hover:text-orange-600 transition-colors">
                <h3>Records</h3>
            </Link>
            <Link to="/student" className="text-lg font-medium text-gray-800 hover:text-orange-600 transition-colors">
                <h3>Student</h3>
            </Link>
        </div>
        
        {/* Logout Button */}
        <button 
            onClick={handlogout} 
            className="text-lg font-medium text-left text-gray-800 hover:text-red-600 transition-colors w-max mt-2"
        >
            Logout
        </button>
       </div>
    )
}

export default Dashboard;
