"use client";

import { useDrag } from "react-dnd";
import { Type, Table, Tag } from "lucide-react";

interface ComponentItem {
  type: string;
  label: string;
  icon: React.ReactNode;
}

const COMPONENTS: ComponentItem[] = [
  { type: "text", label: "텍스트", icon: <Type className="h-4 w-4" /> },
  { type: "table", label: "테이블", icon: <Table className="h-4 w-4" /> },
  { type: "label", label: "레이블", icon: <Tag className="h-4 w-4" /> },
];

function DraggableComponentItem({ type, label, icon }: ComponentItem) {
  const [{ isDragging }, drag] = useDrag(() => ({
    type: "component",
    item: { componentType: type },
    collect: (monitor) => ({
      isDragging: monitor.isDragging(),
    }),
  }));

  return (
    <div
      ref={drag}
      className={`flex cursor-move items-center gap-2 rounded border p-2 text-sm transition-all hover:border-blue-500 hover:bg-blue-50 ${
        isDragging ? "opacity-50" : ""
      }`}
    >
      {icon}
      <span>{label}</span>
    </div>
  );
}

export function ComponentPalette() {
  return (
    <div className="space-y-2">
      {COMPONENTS.map((component) => (
        <DraggableComponentItem key={component.type} {...component} />
      ))}
    </div>
  );
}