"use client";

import React from "react";
import { ComponentData } from "@/types/screen";
import { componentRegistry, ComponentRenderer } from "../DynamicComponentRenderer";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";

// 탭 컴포넌트 렌더러
const TabsRenderer: ComponentRenderer = ({ component, children, ...props }) => {
  const config = component.componentConfig || {};
  const {
    tabs = [
      { id: "tab1", label: "탭 1", content: "첫 번째 탭 내용" },
      { id: "tab2", label: "탭 2", content: "두 번째 탭 내용" },
      { id: "tab3", label: "탭 3", content: "세 번째 탭 내용" },
    ],
    defaultTab = "tab1",
    orientation = "horizontal", // horizontal, vertical
    style = {},
  } = config;

  return (
    <div className="h-full w-full p-2" style={style}>
      <Tabs defaultValue={defaultTab} orientation={orientation} className="h-full">
        <TabsList className="grid w-full grid-cols-3">
          {tabs.map((tab: any) => (
            <TabsTrigger key={tab.id} value={tab.id} className="pointer-events-none" disabled>
              {tab.label}
            </TabsTrigger>
          ))}
        </TabsList>
        {tabs.map((tab: any) => (
          <TabsContent key={tab.id} value={tab.id} className="mt-4 flex-1">
            {children && React.Children.count(children) > 0 ? (
              children
            ) : (
              <div className="flex h-full items-center justify-center rounded border border-dashed border-gray-300 bg-gray-50">
                <div className="text-center">
                  <div className="text-sm text-gray-600">{tab.content}</div>
                  <div className="mt-1 text-xs text-gray-400">탭 내용 영역</div>
                </div>
              </div>
            )}
          </TabsContent>
        ))}
      </Tabs>
    </div>
  );
};

// 레지스트리에 등록
componentRegistry.register("tabs", TabsRenderer);
componentRegistry.register("tabs-horizontal", TabsRenderer);

export { TabsRenderer };