"use client";

import React from "react";
import { Label } from "@/components/ui/label";
import { Key, Save, Globe } from "lucide-react";
import { ConnectionConfig } from "@/types/connectionTypes";

interface ConnectionTypeSelectorProps {
  config: ConnectionConfig;
  onConfigChange: (config: ConnectionConfig) => void;
}

export const ConnectionTypeSelector: React.FC<ConnectionTypeSelectorProps> = ({ config, onConfigChange }) => {
  return (
    <div>
      <Label className="text-sm font-medium">연결 종류</Label>
      <div className="mt-2 grid grid-cols-3 gap-2">
        <div
          className={`cursor-pointer rounded-lg border-2 p-3 text-center transition-colors ${
            config.connectionType === "simple-key"
              ? "border-primary bg-accent"
              : "border-border hover:border-input"
          }`}
          onClick={() => onConfigChange({ ...config, connectionType: "simple-key" })}
        >
          <Key className="mx-auto h-6 w-6 text-primary" />
          <div className="mt-1 text-xs font-medium">단순 키값 연결</div>
          <div className="text-xs text-muted-foreground">중계 테이블 생성</div>
        </div>

        <div
          className={`cursor-pointer rounded-lg border-2 p-3 text-center transition-colors ${
            config.connectionType === "data-save"
              ? "border-emerald-500 bg-emerald-50"
              : "border-border hover:border-input"
          }`}
          onClick={() => onConfigChange({ ...config, connectionType: "data-save" })}
        >
          <Save className="mx-auto h-6 w-6 text-emerald-500" />
          <div className="mt-1 text-xs font-medium">데이터 저장</div>
          <div className="text-xs text-muted-foreground">필드 매핑 저장</div>
        </div>

        <div
          className={`cursor-pointer rounded-lg border-2 p-3 text-center transition-colors ${
            config.connectionType === "external-call"
              ? "border-orange-500 bg-amber-50"
              : "border-border hover:border-input"
          }`}
          onClick={() => {
            console.log("🔄 [ConnectionTypeSelector] External call selected");
            onConfigChange({ ...config, connectionType: "external-call" });
          }}
        >
          <Globe className="mx-auto h-6 w-6 text-amber-500" />
          <div className="mt-1 text-xs font-medium">외부 호출</div>
          <div className="text-xs text-muted-foreground">API/이메일 호출</div>
        </div>
      </div>
    </div>
  );
};
