"use client";

import React from "react";
import { Database, Globe } from "lucide-react";
import { ConnectionType } from "../types/redesigned";

interface ConnectionTypeSelectorProps {
  connectionType: "data_save" | "external_call";
  onConnectionTypeChange: (type: "data_save" | "external_call") => void;
}

const connectionTypes: ConnectionType[] = [
  {
    id: "data_save",
    label: "데이터 저장",
    description: "INSERT/UPDATE/DELETE 작업",
    icon: <Database className="w-6 h-6" />,
  },
  {
    id: "external_call",
    label: "외부 호출",
    description: "API/Webhook 호출",
    icon: <Globe className="w-6 h-6" />,
  },
];

export const ConnectionTypeSelector: React.FC<ConnectionTypeSelectorProps> = ({
  connectionType,
  onConnectionTypeChange,
}) => {
  return (
    <div className="p-6 border-b border-border">
      <h2 className="text-lg font-semibold text-foreground mb-4">
        연결 타입 선택
      </h2>
      
      <div className="space-y-3">
        {connectionTypes.map((type) => (
          <div
            key={type.id}
            className={`p-4 rounded-lg border-2 cursor-pointer transition-all duration-200 ${
              connectionType === type.id
                ? "border-orange-500 bg-amber-50 shadow-md"
                : "border-border bg-white hover:border-orange-300 hover:bg-orange-25"
            }`}
            onClick={() => onConnectionTypeChange(type.id)}
          >
            <div className="flex items-center gap-3">
              <div className={`p-2 rounded-lg ${
                connectionType === type.id
                  ? "bg-amber-100 text-amber-600"
                  : "bg-muted text-muted-foreground"
              }`}>
                {type.icon}
              </div>
              <div>
                <h3 className="font-medium text-foreground">{type.label}</h3>
                <p className="text-sm text-muted-foreground">{type.description}</p>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};