"use client"

import { useParams, usePathname } from "next/navigation";

import { cn } from "@/lib/utils";
import Link from "next/link";
import { DropdownNav } from "./dropdown-nav";

export function MainNav({
  className,
  ...props
}: React.HTMLAttributes<HTMLElement>) {
  const pathname = usePathname();
  const params = useParams();

  const routes = [
    {
      href: `/settings`,
      label: 'Paramètres',
      active: pathname === `/settings` || pathname === `/settings/profile`,
    },
    /*{
      href: `/settings`,
      label: 'Autre',
      active: pathname === `/settings`,
    },*/
  ];

  return (
    <nav className={cn("flex items-center space-x-4 lg:space-x-6", className)}>
      {routes.map((route) => (
        <Link
          key={route.href}
          href={route.href}
          className={cn(
            "text-sm font-medium transition-colors hover:text-primary",
            route.active ? "text-black dark:text-white" : "text-muted-foreground"
          )}
        >
          {route.label}
        </Link>
      ))}
    </nav>
  )
};

export function StoreNav({
  className,
  ...props
}: React.HTMLAttributes<HTMLElement>) {
  const pathname = usePathname();
  const params = useParams();

  const productItems = [
    {
      href: `/${params.storeId}/categories`,
      label: 'Catégories'
    },
    {
      href: `/${params.storeId}/features`,
      label: 'Caractéristiques'
    },
    {
      href: `/${params.storeId}/brands`,
      label: 'Marques'
    },
    {
      href: `/${params.storeId}/billboards`,
      label: "Panneaux d'affichage"
    }
  ];

  const orderItems = [
    {
      href: `/${params.storeId}/carrier`,
      label: 'Transporteurs'
    },
    {
      href: `/${params.storeId}/status`,
      label: 'Statuts'
    },
    {
      href: `/${params.storeId}/paymentMethods`,
      label: 'Moyens de paiement'
    },
  ];

  return (
    <nav className={cn("flex items-center space-x-4 lg:space-x-6", className)}>
      <Link
        key={`/${params.storeId}`}
        href={`/${params.storeId}`}
        className={cn(
          "text-sm font-medium transition-colors hover:text-primary",
          pathname.startsWith(`/${params.storeId}`) ? "text-black dark:text-white" : "text-muted-foreground"
        )}
      >
        Accueil
      </Link>
      <DropdownNav name="Produits" href={`/${params.storeId}/products`} items={productItems} />
      <DropdownNav name="Commandes" href={`/${params.storeId}/orders`} items={orderItems} />
      <Link
        key={`/${params.storeId}/settings`}
        href={`/${params.storeId}/settings`}
        className={cn(
          "text-sm font-medium transition-colors hover:text-primary",
          pathname.startsWith(`/${params.storeId}/settings`) ? "text-black dark:text-white" : "text-muted-foreground"
        )}
      >
        Paramètres
      </Link>
    </nav>
  )
};