import { useNavigate } from "react-router";
import { useState } from "react";

export default function Dashboard() {
  const navigate = useNavigate();
  const [menu, setMenu] = useState("dashboard");

  const menus = ["dashboard", "profile", "settings", "about"];

  return (
    <div className="flex min-h-screen bg-gray-900 text-white">

      {/* SIDEBAR */}
      <div className="w-52 bg-gray-800 p-4 flex flex-col justify-between">
        <div>
          <h1 className="text-xl font-bold mb-6">MyApp</h1>

          {menus.map((item) => (
            <div
              key={item}
              onClick={() => setMenu(item)}
              className={`p-2 mb-2 rounded cursor-pointer capitalize ${
                menu === item ? "bg-purple-600" : "hover:bg-gray-700"
              }`}
            >
              {item}
            </div>
          ))}
        </div>

        <button   
          onClick={() => navigate("/login")}
          className="bg-red-500 py-1 rounded"
        >
          Logout
        </button>
      </div>

      {/* CONTENT */}
      <div className="flex-1 flex items-center justify-center">
        <div className="bg-gray-800 p-10 rounded-xl shadow-lg text-center w-[450px] h-[220px]">
          
          <h1 className="text-2xl font-bold capitalize mb-3">
            {menu}
          </h1>

          <p className="text-gray-400">
            Selamat datang di halaman {menu} 👋
          </p>

        </div>
      </div>
    </div>
  );
}