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

function Dashboard() {
  const nav = useNavigate();

  const logout = () => {
    localStorage.removeItem("user"); 
    nav("/");
  };

  return (
    <div className="p">
      <div className="w">
        <div className="h c" style={{ background: "#0f172a", color: "white", border: "none" }}>
          <div className="r" style={{ width: "100%", justifyContent: "space-between" }}>
            <div>
              <p className="t" style={{ fontSize: 12, textTransform: "uppercase", letterSpacing: "0.3em", color: "#67e8f9" }}>Welcome</p>
              <h1 className="t" style={{ marginTop: 12, fontSize: 36, fontWeight: 700 }}>Dashboard</h1>
              <p className="m" style={{ marginTop: 12, color: "#cbd5e1" }}>Manage employees, departments, and salaries from one clean place.</p>
            </div>

            <button
              onClick={logout}
              className="b"
              style={{ background: "#f43f5e", color: "white" }}
            >
              Logout
            </button>
          </div>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24, marginTop: 32 }}>
          <Link to="/employee" className="c">
            <p className="text-sm font-semibold uppercase tracking-[0.25em] text-cyan-600">01</p>
            <h2 className="t" style={{ marginTop: 16, fontSize: 24, fontWeight: 700, color: "#0f172a" }}>Employee</h2>
            <p className="m" style={{ marginTop: 12 }}>Add staff details and manage employee records.</p>
          </Link>

          <Link to="/department" className="c">
            <p className="text-sm font-semibold uppercase tracking-[0.25em] text-emerald-600">02</p>
            <h2 className="t" style={{ marginTop: 16, fontSize: 24, fontWeight: 700, color: "#0f172a" }}>Department</h2>
            <p className="m" style={{ marginTop: 12 }}>Save department codes, names, and base salaries.</p>
          </Link>

          <Link to="/salary" className="c">
            <p className="text-sm font-semibold uppercase tracking-[0.25em] text-violet-600">03</p>
            <h2 className="t" style={{ marginTop: 16, fontSize: 24, fontWeight: 700, color: "#0f172a" }}>Salary</h2>
            <p className="m" style={{ marginTop: 12 }}>Create salary reports and export payroll PDF.</p>
          </Link>
        </div>
      </div>
    </div>
  );
}

export default Dashboard;
