"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import {
  LayoutDashboard,
  Store,
  ShoppingCart,
  Wallet,
  Package,
  LogOut,
} from "lucide-react";

export default function VendorLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const pathname = usePathname();

  const menus = [
    {
      title: "Dashboard",
      href: "/vendor/dashboard",
      icon: <LayoutDashboard size={18} />,
    },
    {
      title: "Products",
      href: "/vendor/products",
      icon: <Package size={18} />,
    },
    {
      title: "Orders",
      href: "/vendor/orders",
      icon: <ShoppingCart size={18} />,
    },
    {
      title: "Payouts",
      href: "/vendor/payouts",
      icon: <Wallet size={18} />,
    },
    {
      title: "Shop Profile",
      href: "/vendor/profile",
      icon: <Store size={18} />,
    },
  ];

  const logout = () => {
    localStorage.removeItem("auth_token");
    localStorage.removeItem("user");

    window.location.href = "/login";
  };

  return (
    <main className="min-h-screen bg-[#f7fff8]">
      <div className="max-w-7xl mx-auto px-4 py-8">

        <div className="grid lg:grid-cols-[280px_1fr] gap-8">

          <aside className="bg-white rounded-[2rem] border border-green-100 shadow-sm p-5 h-fit">

            <h2 className="text-2xl font-black mb-6">
              Vendor Panel
            </h2>

            <div className="space-y-2">

              {menus.map((menu) => (
                <Link
                  key={menu.href}
                  href={menu.href}
                  className={`flex items-center gap-3 px-4 py-3 rounded-2xl transition ${
                    pathname === menu.href
                      ? "bg-green-600 text-white"
                      : "hover:bg-green-50"
                  }`}
                >
                  {menu.icon}
                  {menu.title}
                </Link>
              ))}

              <button
                onClick={logout}
                className="cursor-pointer w-full flex items-center gap-3 px-4 py-3 rounded-2xl text-red-600 hover:bg-red-50"
              >
                <LogOut size={18} />
                Logout
              </button>

            </div>
          </aside>

          <section>{children}</section>

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