"use client"

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

interface ProfileTabsProps {
  tabs: { id: string; label: string; count?: number }[]
  defaultTab?: string
  userType: "individual" | "business" | "investor"
  onTabChange?: (tabId: string) => void
}

const userTypeConfig = {
  individual: {
    activeColor: "text-primary border-primary",
  },
  business: {
    activeColor: "text-amber-400 border-amber-400",
  },
  investor: {
    activeColor: "text-emerald-400 border-emerald-400",
  },
}

export function ProfileTabs({ tabs, defaultTab, userType, onTabChange }: ProfileTabsProps) {
  const [activeTab, setActiveTab] = useState(defaultTab || tabs[0]?.id)
  const config = userTypeConfig[userType]

  const handleTabChange = (tabId: string) => {
    setActiveTab(tabId)
    onTabChange?.(tabId)
  }

  return (
    <div className="border-b border-border/50">
      <nav className="flex overflow-x-auto scrollbar-hide">
        {tabs.map((tab) => (
          <button
            key={tab.id}
            onClick={() => handleTabChange(tab.id)}
            className={cn(
              "flex items-center cursor-pointer gap-2 px-6 py-4 text-sm font-medium border-b-2 transition-colors whitespace-nowrap",
              activeTab === tab.id
                ? config.activeColor
                : "text-muted-foreground border-transparent hover:text-foreground hover:bg-secondary/30"
            )}
          >
            {tab.label}
          {tab.count > 0 && (
  <span
    className={cn(
      "px-2 py-0.5 rounded-full text-xs",
      activeTab === tab.id
        ? "bg-secondary text-foreground"
        : "bg-secondary/50 text-muted-foreground"
    )}
  >
    {tab.count}
  </span>
)}
          </button>
        ))}
      </nav>
    </div>
  )
}