import { ReactNode } from "react";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs";
import { Card, CardContent } from "../ui/card";
import { LucideIcon } from "lucide-react";

interface TabItem {
  id: string;
  label: string;
  icon?: LucideIcon;
  badge?: string | number;
  content: ReactNode;
}

interface TabViewContainerProps {
  tabs: TabItem[];
  defaultTab?: string;
  orientation?: "horizontal" | "vertical";
}

export function TabViewContainer({
  tabs,
  defaultTab,
  orientation = "horizontal"
}: TabViewContainerProps) {
  return (
    <Tabs defaultValue={defaultTab || tabs[0]?.id} className="w-full">
      {/* 데스크탑: 수평 탭 */}
      <div className="hidden md:block">
        <TabsList className="w-full justify-start bg-gray-100 p-1 rounded-lg mb-4">
          {tabs.map((tab) => (
            <TabsTrigger
              key={tab.id}
              value={tab.id}
              className="flex items-center gap-2 data-[state=active]:bg-white data-[state=active]:shadow-sm"
            >
              {tab.icon && <tab.icon className="h-4 w-4" />}
              <span>{tab.label}</span>
              {tab.badge && (
                <span className="ml-1 px-2 py-0.5 text-xs bg-blue-100 text-blue-700 rounded-full">
                  {tab.badge}
                </span>
              )}
            </TabsTrigger>
          ))}
        </TabsList>
      </div>

      {/* 모바일: 드롭다운 스타일 탭 */}
      <div className="md:hidden mb-4">
        <TabsList className="w-full grid grid-cols-2 sm:grid-cols-3 gap-1 bg-gray-100 p-1 rounded-lg">
          {tabs.map((tab) => (
            <TabsTrigger
              key={tab.id}
              value={tab.id}
              className="text-xs sm:text-sm data-[state=active]:bg-white data-[state=active]:shadow-sm"
            >
              {tab.icon && <tab.icon className="h-3 w-3 sm:h-4 sm:w-4 mr-1" />}
              {tab.label}
            </TabsTrigger>
          ))}
        </TabsList>
      </div>

      {tabs.map((tab) => (
        <TabsContent key={tab.id} value={tab.id} className="mt-0">
          {tab.content}
        </TabsContent>
      ))}
    </Tabs>
  );
}
