"use client";

import React from "react";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { ComponentData } from "@/types/screen";
import { BasicTab } from "./button-config/BasicTab";
import { ActionTab } from "./button-config/ActionTab";
import { DataflowTab } from "./button-config/DataflowTab";
import { AdvancedTab } from "./button-config/AdvancedTab";

interface ButtonConfigPanelProps {
  component: ComponentData;
  onUpdateProperty: (path: string, value: any) => void;
  allComponents?: ComponentData[];
  currentTableName?: string;
  currentScreenCompanyCode?: string;
}

export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
  component,
  onUpdateProperty,
  allComponents = [],
  currentTableName,
  currentScreenCompanyCode,
}) => {
  if (!component) {
    return <div className="text-muted-foreground p-4 text-sm">컴포넌트 정보를 불러올 수 없습니다.</div>;
  }

  const tabProps = {
    component,
    onUpdateProperty,
    allComponents,
    currentTableName,
    currentScreenCompanyCode,
  };

  return (
    <Tabs defaultValue="basic" className="w-full">
      <TabsList className="grid w-full grid-cols-4">
        <TabsTrigger value="basic" className="text-xs">기본</TabsTrigger>
        <TabsTrigger value="action" className="text-xs">액션</TabsTrigger>
        <TabsTrigger value="dataflow" className="text-xs">데이터플로우</TabsTrigger>
        <TabsTrigger value="advanced" className="text-xs">고급</TabsTrigger>
      </TabsList>

      <TabsContent value="basic" className="mt-4">
        <BasicTab {...tabProps} />
      </TabsContent>

      <TabsContent value="action" className="mt-4">
        <ActionTab {...tabProps} />
      </TabsContent>

      <TabsContent value="dataflow" className="mt-4">
        <DataflowTab {...tabProps} />
      </TabsContent>

      <TabsContent value="advanced" className="mt-4">
        <AdvancedTab {...tabProps} />
      </TabsContent>
    </Tabs>
  );
};