'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { cn } from '@/lib/utils';

const TABS = [
  { href: '/seller/settings/store', label: 'Store' },
  { href: '/seller/settings/site', label: 'Website' },
  { href: '/seller/settings/shipping', label: 'Shipping' },
  { href: '/seller/settings/notifications', label: 'Notifications' },
  { href: '/seller/settings/payments', label: 'Payments' },
] as const;

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

  return (
    <div>
      <h1 className="text-2xl font-bold text-ink">Settings</h1>
      <nav className="mt-4 flex gap-1 border-b border-forest/15">
        {TABS.map((t) => {
          const active = pathname === t.href || pathname.startsWith(`${t.href}/`);
          return (
            <Link
              key={t.href}
              href={t.href}
              className={cn(
                '-mb-px border-b-2 px-4 py-2 text-sm font-medium',
                active
                  ? 'border-forest text-forest'
                  : 'border-transparent text-ink/60 hover:text-ink',
              )}
            >
              {t.label}
            </Link>
          );
        })}
      </nav>
      <div className="mt-6">{children}</div>
    </div>
  );
}