import Link from "next/link";

const TABS = [
  { href: "/iv-manage-84x2/settings", label: "Store Settings" },
  { href: "/iv-manage-84x2/settings/company", label: "Company Details" },
  { href: "/iv-manage-84x2/settings/gst", label: "GST" },
  { href: "/iv-manage-84x2/settings/invoice", label: "Invoice" },
  { href: "/iv-manage-84x2/settings/payment-gateway", label: "Payment Gateway" },
  { href: "/iv-manage-84x2/settings/shipping", label: "Shipping" },
  { href: "/iv-manage-84x2/settings/email", label: "Email" },
  { href: "/iv-manage-84x2/settings/whatsapp", label: "WhatsApp" },
  { href: "/iv-manage-84x2/settings/notifications", label: "Notifications" },
  { href: "/iv-manage-84x2/settings/users", label: "Users & Roles" },
  { href: "/iv-manage-84x2/settings/roles", label: "Roles & Permissions" },
];

export default function SettingsTabs({ active }: { active: string }) {
  return (
    <div className="mb-6 flex flex-wrap gap-2 border-b border-rose-100 pb-4">
      {TABS.map((t) => (
        <Link
          key={t.href}
          href={t.href}
          className={`rounded-full px-3 py-1.5 text-sm font-medium transition-colors ${
            active === t.href ? "bg-rose-700 text-white" : "bg-rose-50 text-stone-600 hover:bg-rose-100"
          }`}
        >
          {t.label}
        </Link>
      ))}
    </div>
  );
}