'use client'

import { useState } from 'react'
import { cn } from '@/lib/utils'
import { UserTab } from '../types'

interface TabNavigationProps {
  activeTab?: UserTab
  onTabChange?: (tab: UserTab) => void
}

export function TabNavigation({ activeTab = UserTab.About, onTabChange }: TabNavigationProps) {
  const [currentTab, setCurrentTab] = useState(activeTab)

  const handleTabClick = (tab: UserTab) => {
    setCurrentTab(tab)
    onTabChange?.(tab)
  }

  return (
    <div className="flex flex-row items-center justify-start">
      {/* About 选项卡 */}
      <div className="flex flex-col items-start justify-start py-0 pr-4 pl-0">
        <button
          onClick={() => handleTabClick(UserTab.About)}
          className={cn(
            'flex h-8 w-full flex-col items-center justify-start gap-1',
            'transition-colors duration-200'
          )}
        >
          <div
            className={cn(
              "text-left font-['Poppins'] text-[20px] leading-[24px] font-semibold whitespace-nowrap",
              currentTab === UserTab.About ? 'text-white' : 'text-[#958e9e]'
            )}
          >
            About
          </div>
          {currentTab === UserTab.About && <div className="h-1 w-5 rounded bg-[#d21f77]" />}
        </button>
      </div>

      {/* Album 选项卡 */}
      <div className="flex flex-col items-start justify-start py-0 pr-4 pl-0">
        <button
          onClick={() => handleTabClick(UserTab.Album)}
          className={cn(
            'flex h-8 w-full flex-col items-center justify-start gap-1',
            'transition-colors duration-200'
          )}
        >
          <div
            className={cn(
              "text-left font-['Poppins'] text-[20px] leading-[24px] font-semibold whitespace-nowrap",
              currentTab === UserTab.Album ? 'text-white' : 'text-[#958e9e]'
            )}
          >
            Album
          </div>
          {currentTab === UserTab.Album && <div className="h-1 w-5 rounded bg-[#d21f77]" />}
        </button>
      </div>
    </div>
  )
}
