"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { cn } from "@/lib/utils";
import { buttonVariants } from "@/components/ui/button";
import {
  BookUser,
  CircleUserRound,
  CreditCard,
  House,
  LogOut,
  ShoppingBag,
} from "lucide-react";

const sidebarItems = [
  {
    title: "Übersicht",
    href: "/account",
    icon: CircleUserRound,
  },
  {
    title: "Bestellungen",
    href: "/account/orders",
    icon: ShoppingBag,
  },
  {
    title: "Adressen",
    href: "/account/address",
    icon: House,
  },
  {
    title: "Zahlungsarten",
    href: "/account/payment-methods",
    icon: CreditCard,
  },
  {
    title: "Kontodetails",
    href: "/account/details",
    icon: BookUser,
  },
];

export const AccountSidebar = () => {
  const pathname = usePathname();

  return (
    <div className="flex flex-col gap-1 py-4 w-full sm:w-64">
      <nav className="flex flex-col gap-1 px-2">
        {sidebarItems.map((item) => {
          const isActive = pathname === item.href;
          const Icon = item.icon;

          return (
            <Link
              key={item.href}
              href={item.href}
              className={cn(
                buttonVariants({ variant: "ghost" }),
                "justify-start gap-3 h-10 px-3 transition-colors",
                isActive
                  ? "bg-secondary text-secondary-foreground font-medium"
                  : "text-muted-foreground hover:text-foreground hover:bg-muted"
              )}
            >
              <Icon className={cn("w-4 h-4 shrink-0", isActive ? "text-primary" : "text-muted-foreground")} />
              <span className="text-sm">{item.title}</span>
            </Link>
          );
        })}
      </nav>

      <div className="mt-auto px-2 pt-4 border-t border-border/40">
        <Link
          href="/account/logout"
          className={cn(
            buttonVariants({ variant: "ghost" }),
            "justify-start gap-3 h-10 px-3 w-full text-muted-foreground hover:text-destructive hover:bg-destructive/10 transition-colors"
          )}
        >
          <LogOut className="w-4 h-4 shrink-0" />
          <span className="text-sm font-medium">Abmelden</span>
        </Link>
      </div>
    </div>
  );
};