"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { cn } from "@/lib/utils";
import { User, Bell, CreditCard } from "lucide-react";
import { useDataProvider } from "@/lib/demo/data-provider-context";

function getSettingsNav(basePath: string) {
  return [
    { label: "Profile", href: `${basePath}/settings/profile`, icon: User },
    { label: "Notifications", href: `${basePath}/settings/notifications`, icon: Bell },
    { label: "Subscription", href: `${basePath}/settings/subscription`, icon: CreditCard },
  ];
}

export default function SettingsLayout({ children }: { children: React.ReactNode }) {
  const pathname = usePathname();
  const { basePath } = useDataProvider();
  const settingsNav = getSettingsNav(basePath);

  return (
    <div className="space-y-6">
      <div>
        <h1 className="font-heading text-2xl font-bold tracking-tight">Settings</h1>
        <p className="text-sm text-muted-foreground mt-1">Manage your account preferences.</p>
      </div>
      <div className="flex flex-col sm:flex-row gap-6">
        <nav className="flex sm:flex-col gap-1 sm:w-52 shrink-0">
          {settingsNav.map((item) => (
            <Link key={item.href} href={item.href}
              className={cn(
                "flex items-center gap-2.5 rounded-xl px-3.5 py-2.5 text-sm font-medium transition-all duration-200",
                pathname === item.href
                  ? "bg-primary/10 text-primary shadow-sm"
                  : "text-muted-foreground hover:bg-accent hover:text-foreground"
              )}>
              <item.icon className={cn("size-4", pathname === item.href ? "text-primary" : "text-muted-foreground")} />
              {item.label}
            </Link>
          ))}
        </nav>
        <div className="flex-1 min-w-0">{children}</div>
      </div>
    </div>
  );
}
