import { ComponentDefinition, ComponentCategory } from "@/types/component";
import { FolderTree } from "lucide-react";
import { CategoryWidget } from "@/components/screen/widgets/CategoryWidget";

/**
 * 카테고리 관리 컴포넌트 정의
 * - 메뉴 스코프 기반 카테고리 값 관리
 * - 좌우 분할 UI (컬럼 목록 + 값 관리)
 */
export const categoryManagerDefinition: ComponentDefinition = {
  // 기본 정보
  id: "category-manager",
  name: "카테고리 관리",
  nameEng: "Category Manager",
  description: "메뉴 스코프 기반 카테고리 값 관리 (좌우 분할 UI)",
  category: ComponentCategory.DISPLAY,
  webType: "category" as any,

  // 컴포넌트
  component: CategoryWidget,

  // 아이콘
  icon: FolderTree,

  // 기본 크기
  defaultSize: {
    width: 1000,
    height: 600,
  },

  // 태그
  tags: ["category", "reference", "manager", "scope"],

  // 작성자
  author: "system",

  // 속성
  properties: {
    menuId: {
      type: "number",
      label: "메뉴 ID",
      description: "현재 화면의 메뉴 ID (자동 설정)",
      required: true,
    },
    tableName: {
      type: "string",
      label: "테이블명",
      description: "현재 화면의 테이블명 (자동 설정)",
      required: true,
    },
  },

  // 특징
  features: [
    "메뉴 스코프 기반 카테고리 관리",
    "좌우 분할 UI (컬럼 목록 + 값 관리)",
    "실시간 검색 및 필터링",
    "CRUD 기능 (추가, 수정, 삭제)",
    "색상 및 아이콘 설정",
    "계층 구조 지원 (부모-자식)",
  ],

  // 제약사항
  constraints: {
    minSize: { width: 800, height: 400 },
    maxSize: { width: 1400, height: 1000 },
  },
};