"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 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 !== undefined && (
              <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>
  )
}