/**
 * TabNavigationMolecule
 * 
 * 아토믹 디자인: Molecule
 * 
 * 역할: 반응형 탭 네비게이션 UI
 * - 데스크톱: 기본 Tabs UI 사용
 * - 모바일: TabChip을 사용한 버튼 스타일 탭
 * 
 * 재사용성: 모든 목록 페이지에서 탭 전환이 필요한 경우 사용
 */

import { TabsList, TabsTrigger } from "../ui/tabs";
import { TabChip } from "../atoms/TabChip";

export interface TabItem {
  value: string;
  label: string;
  count: number;
  color?: "blue" | "green" | "orange" | "red" | "purple" | "gray";
}

interface TabNavigationMoleculeProps {
  tabs: TabItem[];
  activeTab: string;
  onTabChange: (value: string) => void;
}

export function TabNavigationMolecule({
  tabs,
  activeTab,
  onTabChange,
}: TabNavigationMoleculeProps) {
  return (
    <>
      {/* 데스크톱 - 기본 테이블 탭 */}
      <div className="hidden lg:block mb-4">
        <TabsList>
          {tabs.map((tab) => (
            <TabsTrigger key={tab.value} value={tab.value}>
              {tab.label} ({tab.count})
            </TabsTrigger>
          ))}
        </TabsList>
      </div>

      {/* 모바일 - 커스텀 버튼 탭 */}
      <div className="lg:hidden mb-4">
        <div className="flex flex-wrap gap-2">
          {tabs.map((tab) => (
            <TabChip
              key={tab.value}
              label={tab.label}
              count={tab.count}
              active={activeTab === tab.value}
              onClick={() => onTabChange(tab.value)}
              color={tab.color as any}
            />
          ))}
        </div>
      </div>
    </>
  );
}
