"use client"

import Link from "next/link"
import { usePathname } from "next/navigation"

import { cn } from "@/lib/utils"

export type SettingsTabId = "common" | "social-media"

const SETTINGS_TABS: { id: SettingsTabId; label: string; href: string }[] = [
  { id: "common", label: "Common", href: "/dashboard/settings/common" },
  {
    id: "social-media",
    label: "Social Media",
    href: "/dashboard/settings/social-media",
  },
]

type SettingsTabNavProps = {
  activeTab: SettingsTabId
}

export function SettingsTabNav({ activeTab }: SettingsTabNavProps) {
  const pathname = usePathname()

  return (
    <div className="w-full border-b border-border bg-muted/30">
      <div className="flex w-full">
        {SETTINGS_TABS.map((tab) => {
          const isActive =
            activeTab === tab.id || pathname === tab.href

          return (
            <Link
              key={tab.id}
              href={tab.href}
              className={cn(
                "relative min-w-[140px] flex-1 px-6 py-2.5 text-center text-sm font-medium transition-colors sm:flex-none sm:flex-initial",
                isActive
                  ? "z-10 -mb-px border-x border-t-4 border-border border-t-primary bg-background text-foreground"
                  : "border-b border-transparent text-muted-foreground hover:bg-muted/50 hover:text-foreground"
              )}
            >
              {tab.label}
            </Link>
          )
        })}
      </div>
    </div>
  )
}