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

const Pagelayout = () => {
  const navigate = useNavigate();

  useEffect(() => {
    if (!localStorage.getItem("token")) {
      navigate("/");
    }
  }, []);

  const handleLogout = () => {
    localStorage.removeItem("token");
    navigate("/");
  };

  return (
    <div className="min-h-screen bg-gray-50">
      <div className="bg-olive-700 text-white px-6 py-5 flex items-center justify-between">
        <div className="flex items-center gap-3">
          <Link to="/dashboard" className="hover:underline hover:text-yellow-200">Dashboard</Link>
          <Link to="/product" className="hover:underline hover:text-yellow-200">Products</Link>
          <Link to="/warehouse" className="hover:underline hover:text-yellow-200">Warehouse</Link>
          <Link to="/transaction" className="hover:underline hover:text-yellow-200">Transactions</Link>
          <Link to="/reports" className="hover:underline hover:text-yellow-200">Reports</Link>
        </div>
        <button onClick={handleLogout} className="bg-red-500 w-20 h-10 rounded-xl hover:bg-red-900 text-sm">Logout</button>
      </div>
      <div className="p-4">
        <Outlet />
      </div>
    </div>
  );
};

export default Pagelayout;