import { ComponentDefinition } from "../../../proxy/developerKit/componentInfo";

export const CUSTOM_COMPONENTS: ComponentDefinition[] = [
  {
    name: "Alert",
    icon: "AlertCircle",
    category: "feedback",
    description: "Farklı türlerde uyarı mesajları gösterir",
    properties: [
      {
        name: "children",
        type: "string",
        value: "Bu bir uyarı mesajıdır",
        category: "properties",
      },
      {
        name: "type",
        type: "select",
        value: "warning",
        category: "properties",
        options: ["success", "warning", "danger", "info"],
      },
      {
        name: "closable",
        type: "boolean",
        value: true,
        category: "properties",
      },
      {
        name: "customClose",
        type: "string",
        value: "",
        category: "properties",
      },
      { name: "customIcon", type: "string", value: "", category: "properties" },
      { name: "duration", type: "number", value: 3000, category: "properties" },
      {
        name: "title",
        type: "string",
        value: "Uyarı Başlığı",
        category: "properties",
      },
      { name: "rounded", type: "boolean", value: true, category: "properties" },
      {
        name: "showIcon",
        type: "boolean",
        value: true,
        category: "properties",
      },
      {
        name: "triggerByToast",
        type: "boolean",
        value: false,
        category: "properties",
      },
      { name: "className", type: "string", value: "", category: "styling" },
      { name: "onClose", type: "function", value: "", category: "events" },
    ],
    hooks: [],
  },
  {
    name: "Avatar",
    icon: "User",
    category: "media",
    description: "Kullanıcı profil resmi gösterir",
    properties: [
      {
        name: "alt",
        type: "string",
        value: "Kullanıcı Avatarı",
        category: "properties",
      },
      { name: "icon", type: "string", value: "", category: "properties" },
      {
        name: "size",
        type: "select",
        value: "md",
        category: "properties",
        options: ["sm", "md", "lg"],
      },
      {
        name: "shape",
        type: "select",
        value: "rounded",
        category: "properties",
        options: ["round", "square", "circle", "rounded"],
      },
      {
        name: "src",
        type: "string",
        value:
          "https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&cs=tinysrgb&w=150",
        category: "properties",
      },
      { name: "srcSet", type: "string", value: "", category: "properties" },
      {
        name: "title",
        type: "string",
        value: "Kullanıcı Avatarı",
        category: "properties",
      },
      { name: "className", type: "string", value: "", category: "styling" },
      { name: "onClick", type: "function", value: "", category: "events" },
    ],
    hooks: [],
  },
  {
    name: "Badge",
    icon: "Tag",
    category: "feedback",
    description: "Sayaç ve durum göstergesi",
    properties: [
      {
        name: "children",
        type: "string",
        value: "New",
        category: "properties",
      },
      {
        name: "badgeStyle",
        type: "object",
        value: {},
        category: "properties",
      },
      {
        name: "content",
        type: "string",
        value: "5",
        category: "properties",
      },
      { name: "innerClass", type: "string", value: "", category: "styling" },
      { name: "maxCount", type: "number", value: 99, category: "properties" },
      { name: "className", type: "string", value: "", category: "styling" },
    ],
    hooks: [],
  },
  {
    name: "Button",
    icon: "MousePointer",
    category: "basic",
    description: "Tıklanabilir buton bileşeni",
    properties: [
      {
        name: "children",
        type: "string",
        value: "Buton",
        category: "properties",
      },
      { name: "active", type: "boolean", value: false, category: "properties" },
      { name: "block", type: "boolean", value: false, category: "properties" },
      { name: "color", type: "string", value: "blue-500", category: "styling" },
      {
        name: "disabled",
        type: "boolean",
        value: false,
        category: "properties",
      },
      { name: "icon", type: "string", value: "", category: "properties" },
      {
        name: "loading",
        type: "boolean",
        value: false,
        category: "properties",
      },
      {
        name: "shape",
        type: "select",
        value: "round",
        category: "properties",
        options: ["round", "circle", "none"],
      },
      {
        name: "size",
        type: "select",
        value: "md",
        category: "properties",
        options: ["md", "sm", "lg", "xs"],
      },
      {
        name: "variant",
        type: "select",
        value: "solid",
        category: "properties",
        options: ["solid", "twoTone", "plain", "default"],
      },
      { name: "className", type: "string", value: "", category: "styling" },
      { name: "onClick", type: "function", value: "", category: "events" },
    ],
    hooks: [],
  },
  {
    name: "Card",
    icon: "Square",
    category: "layout",
    description: "Başlık ve içerik alanı olan kart bileşeni",
    properties: [
      {
        name: "children",
        type: "string",
        value:
          "Kart içeriği buraya gelir. Lorem ipsum dolor sit amet consectetur adipisicing elit.",
        category: "properties",
      },
      {
        name: "clickable",
        type: "boolean",
        value: false,
        category: "properties",
      },
      { name: "bodyClass", type: "string", value: "", category: "styling" },
      {
        name: "bordered",
        type: "boolean",
        value: true,
        category: "properties",
      },
      {
        name: "header",
        type: "string",
        value: "Kart Başlığı",
        category: "properties",
      },
      { name: "headerClass", type: "string", value: "", category: "styling" },
      {
        name: "headerBorder",
        type: "boolean",
        value: true,
        category: "properties",
      },
      {
        name: "headerExtra",
        type: "string",
        value: "",
        category: "properties",
      },
      { name: "footer", type: "string", value: "", category: "properties" },
      { name: "footerClass", type: "string", value: "", category: "styling" },
      {
        name: "footerBorder",
        type: "boolean",
        value: true,
        category: "properties",
      },
      { name: "className", type: "string", value: "", category: "styling" },
      { name: "onClick", type: "function", value: "", category: "events" },
    ],
    hooks: [],
  },
  {
    name: "Checkbox",
    icon: "Check",
    category: "form",
    description: "Onay kutusu bileşeni",
    properties: [
      {
        name: "children",
        type: "string",
        value: "Onay Kutusu",
        category: "properties",
      },
      {
        name: "checked",
        type: "boolean",
        value: false,
        category: "properties",
      },
      { name: "color", type: "string", value: "blue-500", category: "styling" },
      {
        name: "defaultChecked",
        type: "boolean",
        value: false,
        category: "properties",
      },
      {
        name: "disabled",
        type: "boolean",
        value: false,
        category: "properties",
      },
      { name: "name", type: "string", value: "", category: "properties" },
      {
        name: "readOnly",
        type: "boolean",
        value: false,
        category: "properties",
      },
      { name: "value", type: "string", value: "", category: "properties" },
      { name: "field", type: "string", value: null, category: "properties" },
      { name: "className", type: "string", value: "", category: "styling" },
      { name: "onChange", type: "function", value: "", category: "events" },
    ],
    hooks: [
      { name: "useState", type: "useState", enabled: false },
      { name: "useRef", type: "useRef", enabled: false },
    ],
  },
  {
    name: "DatePicker",
    icon: "Calendar",
    category: "form",
    description: "Tarih seçici bileşeni",
    properties: [
      {
        name: "closePickerOnChange",
        type: "boolean",
        value: true,
        category: "properties",
      },
      {
        name: "defaultOpen",
        type: "boolean",
        value: false,
        category: "properties",
      },
      {
        name: "defaultValue",
        type: "string",
        value: "",
        category: "properties",
      },
      { name: "value", type: "string", value: "", category: "properties" },
      {
        name: "inputFormat",
        type: "string",
        value: "YYYY-MM-DD",
        category: "properties",
      },
      {
        name: "inputtableBlurClose",
        type: "boolean",
        value: true,
        category: "properties",
      },
      {
        name: "openPickerOnClear",
        type: "boolean",
        value: false,
        category: "properties",
      },
      { name: "className", type: "string", value: "", category: "styling" },
      {
        name: "clearable",
        type: "boolean",
        value: true,
        category: "properties",
      },
      {
        name: "clearButton",
        type: "string",
        value: "",
        category: "properties",
      },
      {
        name: "disabled",
        type: "boolean",
        value: false,
        category: "properties",
      },
      {
        name: "inputtable",
        type: "boolean",
        value: true,
        category: "properties",
      },
      {
        name: "inputPrefix",
        type: "string",
        value: "",
        category: "properties",
      },
      {
        name: "inputSuffix",
        type: "string",
        value: "",
        category: "properties",
      },
      { name: "name", type: "string", value: "date", category: "properties" },
      {
        name: "firstDayOfWeek",
        type: "select",
        value: "monday",
        category: "properties",
        options: ["sunday", "monday"],
      },
      {
        name: "hideOutOfMonthDates",
        type: "boolean",
        value: false,
        category: "properties",
      },
      {
        name: "hideWeekdays",
        type: "boolean",
        value: false,
        category: "properties",
      },
      {
        name: "disableOutOfMonth",
        type: "boolean",
        value: false,
        category: "properties",
      },
      {
        name: "enableHeaderLabel",
        type: "boolean",
        value: true,
        category: "properties",
      },
      {
        name: "dateViewCount",
        type: "number",
        value: 1,
        category: "properties",
      },
      {
        name: "defaultView",
        type: "select",
        value: "date",
        category: "properties",
        options: ["date", "month", "year"],
      },
      {
        name: "placeholder",
        type: "string",
        value: "Tarih seçin",
        category: "properties",
      },
      {
        name: "size",
        type: "select",
        value: "md",
        category: "properties",
        options: ["sm", "md", "lg"],
      },
      { name: "type", type: "string", value: "date", category: "properties" },
      { name: "onChange", type: "function", value: "", category: "events" },
      { name: "onBlur", type: "function", value: "", category: "events" },
      {
        name: "onDropdownOpen",
        type: "function",
        value: "",
        category: "events",
      },
      {
        name: "onDropdownClose",
        type: "function",
        value: "",
        category: "events",
      },
      { name: "onFocus", type: "function", value: "", category: "events" },
    ],
    hooks: [{ name: "useState", type: "useState", enabled: false }],
  },
  {
    name: "Dialog",
    icon: "Square",
    category: "interactive",
    description: "Modal dialog penceresi",
    properties: [
      {
        name: "title",
        type: "string",
        value: "Dialog Başlığı",
        category: "properties",
      },
      {
        name: "children",
        type: "string",
        value: "Dialog içeriği buraya gelir.",
        category: "properties",
      },
      {
        name: "closable",
        type: "boolean",
        value: true,
        category: "properties",
      },
      {
        name: "contentClassName",
        type: "string",
        value: "",
        category: "styling",
      },
      {
        name: "height",
        type: "number",
        value: "",
        category: "properties",
      },
      { name: "width", type: "number", value: 520, category: "properties" },
      { name: "isOpen", type: "boolean", value: false, category: "properties" },
      {
        name: "bodyOpenClassName",
        type: "string",
        value: "",
        category: "styling",
      },
      {
        name: "htmlOpenClassName",
        type: "string",
        value: "",
        category: "styling",
      },
      { name: "className", type: "string", value: "", category: "styling" },
      { name: "onClose", type: "function", value: "", category: "events" },
    ],
    hooks: [{ name: "useState", type: "useState", enabled: false }],
  },
  {
    name: "Drawer",
    icon: "Sidebar",
    category: "interactive",
    description: "Yan panel bileşeni",
    properties: [
      {
        name: "children",
        type: "string",
        value: "Drawer içeriği buraya gelir.",
        category: "properties",
      },
      { name: "bodyClass", type: "string", value: "", category: "styling" },
      {
        name: "closable",
        type: "boolean",
        value: true,
        category: "properties",
      },
      {
        name: "closeTimeoutMS",
        type: "number",
        value: 300,
        category: "properties",
      },
      { name: "footer", type: "string", value: "", category: "properties" },
      { name: "footerClass", type: "string", value: "", category: "styling" },
      { name: "headerClass", type: "string", value: "", category: "styling" },
      { name: "height", type: "number", value: 400, category: "properties" },
      {
        name: "lockScroll",
        type: "boolean",
        value: true,
        category: "properties",
      },
      {
        name: "placement",
        type: "select",
        value: "right",
        category: "properties",
        options: ["left", "right", "top", "bottom"],
      },
      {
        name: "showBackdrop",
        type: "boolean",
        value: true,
        category: "properties",
      },
      {
        name: "title",
        type: "string",
        value: "Drawer Başlığı",
        category: "properties",
      },
      { name: "width", type: "number", value: 400, category: "properties" },
      { name: "isOpen", type: "boolean", value: false, category: "properties" },
      {
        name: "showOkButton",
        type: "boolean",
        value: true,
        category: "properties",
      },
      {
        name: "showCancelButton",
        type: "boolean",
        value: true,
        category: "properties",
      },
      { name: "className", type: "string", value: "", category: "styling" },
      { name: "onClose", type: "function", value: "", category: "events" },
    ],
    hooks: [{ name: "useState", type: "useState", enabled: false }],
  },
  {
    name: "Dropdown",
    icon: "MoreVertical",
    category: "interactive",
    description: "Açılır menü bileşeni",
    properties: [
      {
        name: "title",
        type: "string",
        value: "Dropdown",
        category: "properties",
      },
      { name: "menuClass", type: "string", value: "", category: "styling" },
      { name: "menuStyle", type: "string", value: "", category: "styling" },
      {
        name: "disabled",
        type: "boolean",
        value: false,
        category: "properties",
      },
      { name: "activeKey", type: "string", value: "", category: "properties" },
      {
        name: "trigger",
        type: "select",
        value: "click",
        category: "properties",
        options: ["click", "hover", "context"],
      },
      {
        name: "placement",
        type: "string",
        value: "bottom-start",
        category: "properties",
      },
      { name: "className", type: "string", value: "", category: "styling" },
      {
        name: "items",
        type: "array",
        value: [
          { eventKey: "a", children: "Öğe A", to: "" },
          { eventKey: "b", children: "Öğe B", to: "" },
          { eventKey: "c", children: "Öğe C", to: "" },
        ],
        category: "properties",
      },
      { name: "onClick", type: "function", value: "", category: "events" },
      { name: "onMouseEnter", type: "function", value: "", category: "events" },
      { name: "onMouseLeave", type: "function", value: "", category: "events" },
      {
        name: "onContextMenu",
        type: "function",
        value: "",
        category: "events",
      },
      { name: "onSelect", type: "function", value: "", category: "events" },
      { name: "onOpen", type: "function", value: "", category: "events" },
      { name: "onClose", type: "function", value: "", category: "events" },
      { name: "onToggle", type: "function", value: "", category: "events" },
    ],
    hooks: [],
  },
  {
    name: "Input",
    icon: "Edit",
    category: "form",
    description: "Metin giriş alanı",
    properties: [
      {
        name: "disabled",
        type: "boolean",
        value: false,
        category: "properties",
      },
      {
        name: "invalid",
        type: "boolean",
        value: false,
        category: "properties",
      },
      { name: "rows", type: "number", value: 3, category: "properties" },
      { name: "prefix", type: "string", value: "", category: "properties" },
      {
        name: "size",
        type: "select",
        value: "md",
        category: "properties",
        options: ["sm", "md", "lg"],
      },
      { name: "suffix", type: "string", value: "", category: "properties" },
      {
        name: "textArea",
        type: "boolean",
        value: false,
        category: "properties",
      },
      {
        name: "type",
        type: "select",
        value: "text",
        category: "properties",
        options: [
          "button",
          "checkbox",
          "color",
          "date",
          "datetime-local",
          "email",
          "file",
          "hidden",
          "image",
          "month",
          "number",
          "password",
          "radio",
          "range",
          "reset",
          "search",
          "submit",
          "tel",
          "text",
          "time",
          "url",
          "week",
        ],
      },
      {
        name: "unstyle",
        type: "boolean",
        value: false,
        category: "properties",
      },
      { name: "className", type: "string", value: "", category: "styling" },
      {
        name: "placeholder",
        type: "string",
        value: "Metin girin...",
        category: "properties",
      },
      { name: "value", type: "string", value: "", category: "properties" },
      { name: "name", type: "string", value: "", category: "properties" },
      {
        name: "autoComplete",
        type: "select",
        value: "off",
        category: "properties",
        options: ["on", "off"],
      },
      {
        name: "autoFocus",
        type: "boolean",
        value: false,
        category: "properties",
      },
      {
        name: "readOnly",
        type: "boolean",
        value: false,
        category: "properties",
      },
      {
        name: "required",
        type: "boolean",
        value: false,
        category: "properties",
      },
      {
        name: "maxLength",
        type: "number",
        value: "",
        category: "properties",
      },
      {
        name: "minLength",
        type: "number",
        value: "",
        category: "properties",
      },
      { name: "pattern", type: "string", value: "", category: "properties" },
      { name: "onChange", type: "function", value: "", category: "events" },
    ],
    hooks: [
      { name: "useState", type: "useState", enabled: false, initialValue: "" },
      { name: "useRef", type: "useRef", enabled: false }
    ],
  },
  {
    name: "Menu",
    icon: "Menu",
    category: "navigation",
    description: "Navigasyon menüsü",
    properties: [
      { name: "children", type: "string", value: "", category: "properties" },
      {
        name: "menuItemHeight",
        type: "number",
        value: 40,
        category: "properties",
      },
      {
        name: "sideCollapsed",
        type: "boolean",
        value: false,
        category: "properties",
      },
      {
        name: "variant",
        type: "select",
        value: "light",
        category: "properties",
        options: ["light", "dark", "themed", "transparent"],
      },
      { name: "icon", type: "string", value: "", category: "properties" },
      { name: "className", type: "string", value: "", category: "styling" },
      {
        name: "items",
        type: "array",
        value: [
          {
            eventKey: "ayarlar",
            icon: "",
            children: "Ayarlar",
            label: "Ayarlar",
            disabled: false,
          },
          {
            eventKey: "mesaj",
            icon: "",
            children: "Mesaj",
            label: "Mesaj",
            disabled: false,
          },
          {
            eventKey: "galeri",
            icon: "",
            children: "Galeri",
            label: "Galeri",
            disabled: false,
          },
        ],
        category: "properties",
      },
      { name: "onSelect", type: "function", value: "", category: "events" },
    ],
    hooks: [],
  },
  {
    name: "Notification",
    icon: "Bell",
    category: "feedback",
    description: "Bildirim bileşeni",
    properties: [
      {
        name: "children",
        type: "string",
        value: "Bu bir bildirim mesajıdır",
        category: "properties",
      },
      {
        name: "closable",
        type: "boolean",
        value: true,
        category: "properties",
      },
      { name: "customIcon", type: "string", value: "", category: "properties" },
      { name: "duration", type: "number", value: 3000, category: "properties" },
      {
        name: "title",
        type: "string",
        value: "Bildirim Başlığı",
        category: "properties",
      },
      {
        name: "triggerByToast",
        type: "boolean",
        value: false,
        category: "properties",
      },
      {
        name: "type",
        type: "select",
        value: "info",
        category: "properties",
        options: ["success", "warning", "danger", "info"],
      },
      { name: "width", type: "string", value: "350", category: "properties" },
      { name: "className", type: "string", value: "", category: "styling" },
      { name: "onClose", type: "function", value: "", category: "events" },
    ],
    hooks: [],
  },
  {
    name: "Pagination",
    icon: "ChevronRight",
    category: "navigation",
    description: "Sayfalama bileşeni",
    properties: [
      { name: "currentPage", type: "number", value: 1, category: "properties" },
      {
        name: "displayTotal",
        type: "boolean",
        value: true,
        category: "properties",
      },
      { name: "pageSize", type: "number", value: 10, category: "properties" },
      { name: "total", type: "number", value: 100, category: "properties" },
      { name: "className", type: "string", value: "", category: "styling" },
      { name: "onChange", type: "function", value: "", category: "events" },
    ],
    hooks: [{ name: "useState", type: "useState", enabled: false }],
  },
  {
    name: "Progress",
    icon: "Activity",
    category: "feedback",
    description: "İlerleme çubuğu",
    properties: [
      { name: "customInfo", type: "string", value: "", category: "properties" },
      { name: "color", type: "string", value: "", category: "styling" },
      { name: "gapDegree", type: "number", value: 0, category: "properties" },
      {
        name: "gapPosition",
        type: "select",
        value: "top",
        category: "properties",
        options: ["top", "bottom", "left", "right"],
      },
      { name: "percent", type: "number", value: 50, category: "properties" },
      {
        name: "showInfo",
        type: "boolean",
        value: true,
        category: "properties",
      },
      {
        name: "size",
        type: "select",
        value: "md",
        category: "properties",
        options: ["sm", "md"],
      },
      {
        name: "strokeLinecap",
        type: "select",
        value: "round",
        category: "properties",
        options: ["round", "square"],
      },
      { name: "strokeWidth", type: "number", value: 8, category: "properties" },
      { name: "width", type: "number", value: 120, category: "properties" },
      {
        name: "variant",
        type: "select",
        value: "line",
        category: "properties",
        options: ["line", "circle"],
      },
      { name: "className", type: "string", value: "", category: "styling" },
    ],
    hooks: [],
  },
  {
    name: "Radio.Group",
    icon: "Circle",
    category: "form",
    description: "Radio buton grubu",
    properties: [
      {
        name: "checked",
        type: "boolean",
        value: false,
        category: "properties",
      },
      { name: "color", type: "string", value: "blue-500", category: "styling" },
      {
        name: "defaultChecked",
        type: "boolean",
        value: false,
        category: "properties",
      },
      {
        name: "disabled",
        type: "boolean",
        value: false,
        category: "properties",
      },
      {
        name: "name",
        type: "string",
        value: "radioGroup",
        category: "properties",
      },
      { name: "value", type: "string", value: "", category: "properties" },
      {
        name: "vertical",
        type: "boolean",
        value: false,
        category: "properties",
      },
      {
        name: "readOnly",
        type: "boolean",
        value: false,
        category: "properties",
      },
      { name: "className", type: "string", value: "", category: "styling" },
      {
        name: "items",
        type: "array",
        value: [
          { value: "secenekA", label: "Seçenek A", disabled: false },
          { value: "secenekB", label: "Seçenek B", disabled: false },
          { value: "secenekC", label: "Seçenek C", disabled: false },
        ],
        category: "properties",
      },
      { name: "onChange", type: "function", value: "", category: "events" },
    ],
    hooks: [{ name: "useState", type: "useState", enabled: false }],
  },
  {
    name: "Segment",
    icon: "ToggleLeft",
    category: "form",
    description: "Segment kontrol bileşeni",
    properties: [
      { name: "children", type: "string", value: "", category: "properties" },
      {
        name: "defaultValue",
        type: "string",
        value: "",
        category: "properties",
      },
      {
        name: "selectionType",
        type: "select",
        value: "single",
        category: "properties",
        options: ["single", "multiple"],
      },
      {
        name: "size",
        type: "select",
        value: "md",
        category: "properties",
        options: ["lg", "md", "sm", "xs"],
      },
      { name: "value", type: "string", value: "", category: "properties" },
      { name: "className", type: "string", value: "", category: "styling" },
      {
        name: "items",
        type: "array",
        value: [
          { label: "Seçenek 1", value: "secenekA", icon: "", disabled: false },
          { label: "Seçenek 2", value: "secenekB", icon: "", disabled: false },
          { label: "Seçenek 3", value: "secenekC", icon: "", disabled: false },
        ],
        category: "properties",
      },
      { name: "onChange", type: "function", value: "", category: "events" },
    ],
    hooks: [],
  },
  {
    name: "Select",
    icon: "ChevronDown",
    category: "form",
    description: "Açılır seçim listesi",
    properties: [
      { name: "children", type: "string", value: "", category: "properties" },
      {
        name: "size",
        type: "select",
        value: "md",
        category: "properties",
        options: ["sm", "md", "lg"],
      },
      { name: "className", type: "string", value: "", category: "styling" },
      { name: "value", type: "string", value: "", category: "properties" },
      {
        name: "disabled",
        type: "boolean",
        value: false,
        category: "properties",
      },
      {
        name: "multiple",
        type: "boolean",
        value: false,
        category: "properties",
      },
      {
        name: "clearable",
        type: "boolean",
        value: false,
        category: "properties",
      },
      {
        name: "searchable",
        type: "boolean",
        value: true,
        category: "properties",
      },
      {
        name: "items",
        type: "array",
        value: [
          { label: "Seçenek 1", value: "secenekA", disabled: false },
          { label: "Seçenek 2", value: "secenekB", disabled: false },
          { label: "Seçenek 3", value: "secenekC", disabled: false },
        ],
        category: "properties",
      },
      { name: "onChange", type: "function", value: "", category: "events" },
      { name: "onSearch", type: "function", value: "", category: "events" },
    ],
    hooks: [{ name: "useState", type: "useState", enabled: false }],
  },
  {
    name: "Skeleton",
    icon: "Square",
    category: "feedback",
    description: "Yükleme iskelet bileşeni",
    properties: [
      {
        name: "animated",
        type: "boolean",
        value: true,
        category: "properties",
      },
      { name: "height", type: "string", value: "", category: "properties" },
      {
        name: "variant",
        type: "select",
        value: "block",
        category: "properties",
        options: ["block", "circle"],
      },
      { name: "width", type: "string", value: "", category: "properties" },
      { name: "className", type: "string", value: "", category: "styling" },
    ],
    hooks: [],
  },
  {
    name: "Spinner",
    icon: "Loader",
    category: "feedback",
    description: "Yükleme döner bileşeni",
    properties: [
      { name: "color", type: "string", value: "#3b82f6", category: "styling" },
      {
        name: "enableTheme",
        type: "boolean",
        value: true,
        category: "properties",
      },
      {
        name: "isSpining",
        type: "boolean",
        value: true,
        category: "properties",
      },
      {
        name: "size",
        type: "number",
        value: "md",
        category: "properties",
      },
      { name: "className", type: "string", value: "", category: "styling" },
    ],
    hooks: [],
  },
  {
    name: "Steps",
    icon: "GitBranch",
    category: "navigation",
    description: "Adım adım navigasyon göstergesi",
    properties: [
      { name: "children", type: "string", value: "", category: "properties" },
      { name: "current", type: "number", value: 0, category: "properties" },
      {
        name: "status",
        type: "select",
        value: "in-progress",
        category: "properties",
        options: ["in-progress", "error", "complete", "pending"],
      },
      {
        name: "vertical",
        type: "boolean",
        value: false,
        category: "properties",
      },
      { name: "className", type: "string", value: "", category: "styling" },
      {
        name: "items",
        type: "array",
        value: [
          {
            title: "Giriş",
            description: "Kullanıcı doğrulama adımı",
            icon: "",
          },
          { title: "Sipariş", description: "Sipariş onay adımı", icon: "" },
          {
            title: "İnceleme",
            description: "İnceleme ve işleme adımı",
            icon: "",
          },
          { title: "Onay", description: "Son onay adımı", icon: "" },
        ],
        category: "properties",
      },
      { name: "onChange", type: "function", value: "", category: "events" },
    ],
    hooks: [{ name: "useState", type: "useState", enabled: false }],
  },
  {
    name: "Switcher",
    icon: "ToggleLeft",
    category: "form",
    description: "Açma/kapama anahtarı",
    properties: [
      {
        name: "checked",
        type: "boolean",
        value: false,
        category: "properties",
      },
      {
        name: "checkedContent",
        type: "string",
        value: "",
        category: "properties",
      },
      { name: "color", type: "string", value: "", category: "styling" },
      {
        name: "defaultChecked",
        type: "boolean",
        value: false,
        category: "properties",
      },
      {
        name: "disabled",
        type: "boolean",
        value: false,
        category: "properties",
      },
      {
        name: "isLoading",
        type: "boolean",
        value: true,
        category: "properties",
      },
      { name: "name", type: "string", value: "", category: "properties" },
      {
        name: "readOnly",
        type: "boolean",
        value: false,
        category: "properties",
      },
      {
        name: "unCheckedContent",
        type: "string",
        value: "",
        category: "properties",
      },
      { name: "className", type: "string", value: "", category: "styling" },
      { name: "onChange", type: "function", value: "", category: "events" },
    ],
    hooks: [{ name: "useState", type: "useState", enabled: false }],
  },
  {
    name: "Table",
    icon: "Table",
    category: "data",
    description: "Veri tablosu",
    properties: [
      {
        name: "borderlessRow",
        type: "boolean",
        value: false,
        category: "properties",
      },
      {
        name: "compact",
        type: "boolean",
        value: false,
        category: "properties",
      },
      {
        name: "hoverable",
        type: "boolean",
        value: true,
        category: "properties",
      },
      {
        name: "overflow",
        type: "boolean",
        value: true,
        category: "properties",
      },
      { name: "className", type: "string", value: "", category: "styling" },
      {
        name: "columns",
        type: "array",
        value: [
          { title: "Ad", dataIndex: "name", key: "name" },
          { title: "Yaş", dataIndex: "age", key: "age" },
          { title: "Şehir", dataIndex: "city", key: "city" },
        ],
        category: "properties",
      },
      {
        name: "data",
        type: "array",
        value: [
          { key: 1, name: "Ali Veli", age: 32, city: "İstanbul" },
          { key: 2, name: "Ayşe Fatma", age: 28, city: "Ankara" },
          { key: 3, name: "Mehmet Can", age: 35, city: "İzmir" },
        ],
        category: "properties",
      },
    ],
    hooks: [],
  },
  {
    name: "Tabs",
    icon: "Tabs",
    category: "navigation",
    description: "Sekmeli navigasyon",
    properties: [
      {
        name: "defaultValue",
        type: "string",
        value: "tab1",
        category: "properties",
      },
      { name: "value", type: "string", value: "", category: "properties" },
      {
        name: "variant",
        type: "select",
        value: "underline",
        category: "properties",
        options: ["underline", "pill"],
      },
      { name: "className", type: "string", value: "", category: "styling" },
      {
        name: "items",
        type: "array",
        value: [
          {
            key: "tab1",
            label: "Sekme 1",
            children: "İlk sekme içeriği",
            disabled: false,
          },
          {
            key: "tab2",
            label: "Sekme 2",
            children: "İkinci sekme içeriği",
            disabled: false,
          },
          {
            key: "tab3",
            label: "Sekme 3",
            children: "Üçüncü sekme içeriği",
            disabled: false,
          },
        ],
        category: "properties",
      },
      { name: "onChange", type: "function", value: "", category: "events" },
    ],
    hooks: [{ name: "useState", type: "useState", enabled: false }],
  },
  {
    name: "Tag",
    icon: "Hash",
    category: "feedback",
    description: "Etiket bileşeni",
    properties: [
      {
        name: "children",
        type: "string",
        value: "Etiket",
        category: "properties",
      },
      { name: "prefix", type: "boolean", value: false, category: "properties" },
      { name: "suffix", type: "boolean", value: false, category: "properties" },
      { name: "prefixClass", type: "string", value: "", category: "styling" },
      { name: "suffixClass", type: "string", value: "", category: "styling" },
      { name: "className", type: "string", value: "", category: "styling" },
      { name: "onClose", type: "function", value: "", category: "events" },
    ],
    hooks: [],
  },
  {
    name: "TimeInput",
    icon: "Clock",
    category: "form",
    description: "Saat giriş bileşeni",
    properties: [
      { name: "amLabel", type: "string", value: "AM", category: "properties" },
      {
        name: "amPmPlaceholder",
        type: "string",
        value: "AM",
        category: "properties",
      },
      {
        name: "clearable",
        type: "boolean",
        value: true,
        category: "properties",
      },
      {
        name: "defaultValue",
        type: "string",
        value: "",
        category: "properties",
      },
      {
        name: "disabled",
        type: "boolean",
        value: false,
        category: "properties",
      },
      {
        name: "format",
        type: "select",
        value: "24",
        category: "properties",
        options: ["12", "24"],
      },
      {
        name: "invalid",
        type: "boolean",
        value: false,
        category: "properties",
      },
      { name: "name", type: "string", value: "", category: "properties" },
      { name: "pmLabel", type: "string", value: "PM", category: "properties" },
      { name: "prefix", type: "string", value: "", category: "properties" },
      {
        name: "showSeconds",
        type: "boolean",
        value: false,
        category: "properties",
      },
      {
        name: "size",
        type: "select",
        value: "md",
        category: "properties",
        options: ["sm", "md", "lg"],
      },
      { name: "suffix", type: "string", value: "", category: "properties" },
      {
        name: "timeFieldPlaceholder",
        type: "string",
        value: "--:--",
        category: "properties",
      },
      {
        name: "timeFieldClass",
        type: "string",
        value: "",
        category: "styling",
      },
      {
        name: "unstyle",
        type: "boolean",
        value: false,
        category: "properties",
      },
      { name: "value", type: "string", value: "", category: "properties" },
      { name: "className", type: "string", value: "", category: "styling" },
      { name: "onchange", type: "function", value: "", category: "events" },
    ],
    hooks: [{ name: "useState", type: "useState", enabled: false }],
  },
  {
    name: "Tooltip",
    icon: "MessageCircle",
    category: "interactive",
    description: "İpucu bileşeni",
    properties: [
      {
        name: "children",
        type: "string",
        value: "Üzerime gel",
        category: "properties",
      },
      {
        name: "placement",
        type: "select",
        value: "top",
        category: "properties",
        options: [
          "right",
          "left",
          "top",
          "bottom",
          "bottom-start",
          "top-start",
          "top-end",
          "bottom-end",
          "right-start",
          "right-end",
          "left-start",
          "left-end",
        ],
      },
      {
        name: "title",
        type: "string",
        value: "Tooltip içeriği",
        category: "properties",
      },
      { name: "wrapperClass", type: "string", value: "", category: "styling" },
      { name: "className", type: "string", value: "", category: "styling" },
    ],
    hooks: [{ name: "useState", type: "useState", enabled: false }],
  },
  {
    name: "Upload",
    icon: "Upload",
    category: "form",
    description: "Dosya yükleme bileşeni",
    properties: [
      {
        name: "children",
        type: "string",
        value: "Dosya yükle",
        category: "properties",
      },
      { name: "accept", type: "string", value: "", category: "properties" },
      {
        name: "disabled",
        type: "boolean",
        value: false,
        category: "properties",
      },
      {
        name: "draggable",
        type: "boolean",
        value: true,
        category: "properties",
      },
      { name: "fileList", type: "array", value: [], category: "properties" },
      { name: "fileListClass", type: "string", value: "", category: "styling" },
      { name: "fileItemClass", type: "string", value: "", category: "styling" },
      {
        name: "multiple",
        type: "boolean",
        value: false,
        category: "properties",
      },
      {
        name: "showList",
        type: "boolean",
        value: true,
        category: "properties",
      },
      { name: "tip", type: "string", value: "", category: "properties" },
      { name: "uploadLimit", type: "number", value: 5, category: "properties" },
      { name: "className", type: "string", value: "", category: "styling" },
      { name: "beforeUpload", type: "function", value: "", category: "events" },
      { name: "onChange", type: "function", value: "", category: "events" },
      { name: "onFileRemove", type: "function", value: "", category: "events" },
    ],
    hooks: [],
  },
  {
    name: "Grid",
    icon: "Grid3x3",
    category: "layout",
    description: "Responsive grid sistemi - sütun ve satır bazlı düzen",
    properties: [
      { name: "children", type: "string", value: "", category: "properties" },
      {
        name: "cols",
        type: "select",
        value: "3",
        category: "properties",
        options: [
          "1",
          "2",
          "3",
          "4",
          "5",
          "6",
          "7",
          "8",
          "9",
          "10",
          "11",
          "12",
        ],
      },
      {
        name: "rows",
        type: "select",
        value: "2",
        category: "properties",
        options: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"],
      },
      {
        name: "gap",
        type: "select",
        value: "4",
        category: "properties",
        options: ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10"],
      },
      {
        name: "colGap",
        type: "select",
        value: "4",
        category: "properties",
        options: ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10"],
      },
      {
        name: "rowGap",
        type: "select",
        value: "4",
        category: "properties",
        options: ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10"],
      },
      {
        name: "responsive",
        type: "boolean",
        value: true,
        category: "properties",
      },
      {
        name: "smCols",
        type: "select",
        value: "1",
        category: "properties",
        options: [
          "1",
          "2",
          "3",
          "4",
          "5",
          "6",
          "7",
          "8",
          "9",
          "10",
          "11",
          "12",
        ],
      },
      {
        name: "mdCols",
        type: "select",
        value: "2",
        category: "properties",
        options: [
          "1",
          "2",
          "3",
          "4",
          "5",
          "6",
          "7",
          "8",
          "9",
          "10",
          "11",
          "12",
        ],
      },
      {
        name: "lgCols",
        type: "select",
        value: "3",
        category: "properties",
        options: [
          "1",
          "2",
          "3",
          "4",
          "5",
          "6",
          "7",
          "8",
          "9",
          "10",
          "11",
          "12",
        ],
      },
      {
        name: "xlCols",
        type: "select",
        value: "4",
        category: "properties",
        options: [
          "1",
          "2",
          "3",
          "4",
          "5",
          "6",
          "7",
          "8",
          "9",
          "10",
          "11",
          "12",
        ],
      },
      {
        name: "autoFit",
        type: "boolean",
        value: false,
        category: "properties",
      },
      {
        name: "minColWidth",
        type: "string",
        value: "200px",
        category: "properties",
      },
      { name: "height", type: "string", value: "auto", category: "properties" },
      { name: "className", type: "string", value: "", category: "styling" },
      {
        name: "items",
        type: "array",
        value: [
          {
            id: "grid-item-1",
            content: "Grid Item 1",
            colSpan: 1,
            rowSpan: 1,
            colStart: 1,
            rowStart: 1,
            className: "bg-blue-100 p-4 border rounded",
          },
          {
            id: "grid-item-2",
            content: "Grid Item 2",
            colSpan: 1,
            rowSpan: 1,
            colStart: 2,
            rowStart: 1,
            className: "bg-green-100 p-4 border rounded",
          },
          {
            id: "grid-item-3",
            content: "Grid Item 3",
            colSpan: 1,
            rowSpan: 1,
            colStart: 3,
            rowStart: 1,
            className: "bg-yellow-100 p-4 border rounded",
          },
          {
            id: "grid-item-4",
            content: "Grid Item 4",
            colSpan: 2,
            rowSpan: 1,
            colStart: 1,
            rowStart: 2,
            className: "bg-purple-100 p-4 border rounded",
          },
          {
            id: "grid-item-5",
            content: "Grid Item 5",
            colSpan: 1,
            rowSpan: 1,
            colStart: 3,
            rowStart: 2,
            className: "bg-red-100 p-4 border rounded",
          },
        ],
        category: "properties",
      },
    ],
    hooks: [],
  },
];
export const HTML_ELEMENTS: ComponentDefinition[] = [
  {
    name: "div",
    icon: "Square",
    category: "basic",
    description: "Genel amaçlı blok düzeyinde HTML elemanı",
    properties: [
      {
        name: "children",
        type: "string",
        value: "",
        category: "properties",
      },
      {
        name: "className",
        type: "string",
        value: "",
        category: "properties",
      },
      {
        name: "style",
        type: "object",
        value: {},
        category: "properties",
      },
      {
        name: "onClick",
        type: "string",
        value: "",
        category: "events",
      },
      {
        name: "onMouseEnter",
        type: "string",
        value: "",
        category: "events",
      },
      {
        name: "onMouseLeave",
        type: "string",
        value: "",
        category: "events",
      },
    ],
    hooks: [
      {
        name: "useState",
        type: "useState",
        enabled: false,
      },
      {
        name: "useRef",
        type: "useRef",
        enabled: false,
      },
    ],
  },
  {
    name: "input",
    icon: "Input",
    category: "form",
    description: "Giriş alanı bileşeni",
    properties: [
      {
        name: "type",
        type: "select",
        value: "text",
        options: ["text", "password", "email", "number", "tel", "url"],
        category: "properties",
      },
      { name: "value", type: "string", value: "", category: "properties" },
      {
        name: "placeholder",
        type: "string",
        value: "",
        category: "properties",
      },
      {
        name: "disabled",
        type: "boolean",
        value: false,
        category: "properties",
      },
      {
        name: "required",
        type: "boolean",
        value: false,
        category: "properties",
      },
      { name: "className", type: "string", value: "", category: "properties" },
      { name: "onClick", type: "function", value: "", category: "events" },
      { name: "onKeyDown", type: "function", value: "", category: "events" },
      { name: "onKeyUp", type: "function", value: "", category: "events" },
      { name: "onChange", type: "function", value: "", category: "events" },
      { name: "onFocus", type: "function", value: "", category: "events" },
      { name: "onBlur", type: "function", value: "", category: "events" },
    ],
    hooks: [
      { name: "useState", type: "useState", enabled: false, initialValue: "" },
      { name: "useRef", type: "useRef", enabled: false },
    ],
  },
  {
    name: "button",
    icon: "MousePointerClick",
    category: "form",
    description: "Buton bileşeni",
    properties: [
      {
        name: "children",
        type: "string",
        value: "",
        description: "Button text",
        category: "properties",
      },
      {
        name: "type",
        type: "select",
        value: "button",
        options: ["button", "submit", "reset"],
        category: "properties",
      },
      {
        name: "disabled",
        type: "boolean",
        value: false,
        category: "properties",
      },
      {
        name: "className",
        type: "string",
        value: "",
        category: "properties",
      },
      {
        name: "onClick",
        type: "function",
        value: "",
        category: "events",
      },
    ],
    hooks: [
      {
        name: "useState",
        type: "useState",
        enabled: false,
        initialValue: false,
      },
    ],
  },
  {
    name: "textarea",
    icon: "AlignLeft",
    category: "form",
    description: "Çok satırlı metin giriş bileşeni",
    properties: [
      {
        name: "value",
        type: "string",
        value: "",
        category: "properties",
      },
      {
        name: "placeholder",
        type: "string",
        value: "",
        category: "properties",
      },
      {
        name: "rows",
        type: "number",
        value: 4,
        category: "properties",
      },
      {
        name: "cols",
        type: "number",
        value: 50,
        category: "properties",
      },
      {
        name: "disabled",
        type: "boolean",
        value: false,
        category: "properties",
      },
      {
        name: "className",
        type: "string",
        value: "",
        category: "properties",
      },
      {
        name: "onChange",
        type: "function",
        value: "",
        category: "events",
      },
    ],
    hooks: [
      {
        name: "useState",
        type: "useState",
        enabled: false,
        initialValue: "",
      },
    ],
  },
  {
    name: "select",
    icon: "ListTree",
    category: "form",
    description: "Seçim kutusu bileşeni",
    properties: [
      {
        name: "value",
        type: "string",
        value: "",
        category: "properties",
      },
      {
        name: "disabled",
        type: "boolean",
        value: false,
        category: "properties",
      },
      {
        name: "multiple",
        type: "boolean",
        value: false,
        category: "properties",
      },
      {
        name: "className",
        type: "string",
        value: "",
        category: "properties",
      },
      {
        name: "onChange",
        type: "function",
        value: "",
        category: "events",
      },
    ],
    hooks: [
      {
        name: "useState",
        type: "useState",
        enabled: false,
        initialValue: "",
      },
    ],
  },
  {
    name: "checkbox",
    icon: "CheckSquare",
    category: "form",
    description: "Checkbox bileşeni",
    properties: [
      {
        name: "checked",
        type: "boolean",
        value: false,
        category: "properties",
      },
      {
        name: "disabled",
        type: "boolean",
        value: false,
        category: "properties",
      },
      { name: "className", type: "string", value: "", category: "properties" },
      { name: "onChange", type: "function", value: "", category: "events" },
    ],
    hooks: [
      {
        name: "useState",
        type: "useState",
        enabled: false,
        initialValue: false,
      },
    ],
  },
  {
    name: "p",
    icon: "Text",
    category: "basic",
    description: "Paragraf metni gösterir",
    properties: [
      {
        name: "children",
        type: "string",
        value: "",
        description: "Text content",
        category: "properties",
      },
      {
        name: "className",
        type: "string",
        value: "",
        category: "properties",
      },
      {
        name: "onClick",
        type: "function",
        value: "",
        category: "properties",
      },
    ],
    hooks: [
      {
        name: "useState",
        type: "useState",
        enabled: false,
      },
    ],
  },
  {
    name: "span",
    icon: "Type",
    category: "basic",
    description: "Satır içi metin elemanı",
    properties: [
      {
        name: "children",
        type: "string",
        value: "",
        description: "Text content",
        category: "properties",
      },
      {
        name: "className",
        type: "string",
        value: "",
        category: "properties",
      },
      {
        name: "onClick",
        type: "function",
        value: "",
        category: "events",
      },
    ],
    hooks: [
      {
        name: "useState",
        type: "useState",
        enabled: false,
      },
    ],
  },
  {
    name: "h1",
    icon: "Heading1",
    category: "basic",
    description: "Başlık metni (h1)",
    properties: [
      {
        name: "children",
        type: "string",
        value: "",
        description: "Heading text",
        category: "properties",
      },
      {
        name: "className",
        type: "string",
        value: "",
        category: "styling",
      },
      {
        name: "onClick",
        type: "function",
        value: "",
        description: "Click event handler",
        category: "events",
      },
    ],
    hooks: [
      {
        name: "useState",
        type: "useState",
        enabled: false,
      },
    ],
  },
  {
    name: "h2",
    icon: "Heading2",
    category: "basic",
    description: "Başlık metni (h2)",
    properties: [
      {
        name: "children",
        type: "string",
        value: "",
        description: "Heading text",
        category: "properties",
      },
      {
        name: "className",
        type: "string",
        value: "",
        category: "styling",
      },
      {
        name: "onClick",
        type: "function",
        value: "",
        description: "Click event handler",
        category: "events",
      },
    ],
    hooks: [
      {
        name: "useState",
        type: "useState",
        enabled: false,
      },
    ],
  },
  {
    name: "h3",
    icon: "Heading3",
    category: "basic",
    description: "Başlık metni (h3)",
    properties: [
      {
        name: "children",
        type: "string",
        value: "",
        description: "Heading text",
        category: "properties",
      },
      {
        name: "className",
        type: "string",
        value: "",
        category: "styling",
      },
      {
        name: "onClick",
        type: "function",
        value: "",
        category: "events",
      },
    ],
    hooks: [
      {
        name: "useState",
        type: "useState",
        enabled: false,
      },
    ],
  },
  {
    name: "h4",
    icon: "Heading4",
    category: "basic",
    description: "Başlık metni (h4)",
    properties: [
      {
        name: "children",
        type: "string",
        value: "",
        description: "Heading text",
        category: "properties",
      },
      {
        name: "className",
        type: "string",
        value: "",
        category: "styling",
      },
      {
        name: "onClick",
        type: "function",
        value: "",
        category: "events",
      },
    ],
    hooks: [],
  },
  {
    name: "h5",
    icon: "Heading5",
    category: "basic",
    description: "Başlık metni (h5)",
    properties: [
      {
        name: "children",
        type: "string",
        value: "",
        description: "Heading text",
        category: "properties",
      },
      {
        name: "className",
        type: "string",
        value: "",
        category: "styling",
      },
      {
        name: "onClick",
        type: "function",
        value: "",
        category: "events",
      },
    ],
    hooks: [],
  },
  {
    name: "img",
    icon: "Image",
    category: "media",
    description: "Görsel bileşeni",
    properties: [
      {
        name: "src",
        type: "string",
        value: "",
        category: "properties",
      },
      {
        name: "alt",
        type: "string",
        value: "",
        category: "properties",
      },
      {
        name: "width",
        type: "number",
        value: 0,
        category: "properties",
      },
      {
        name: "height",
        type: "number",
        value: 0,
        category: "properties",
      },
      {
        name: "className",
        type: "string",
        value: "",
        category: "properties",
      },
      {
        name: "onClick",
        type: "function",
        value: "",
        category: "events",
      },
      {
        name: "onLoad",
        type: "string",
        value: "",
        category: "events",
      },
    ],
    hooks: [
      {
        name: "useState",
        type: "useState",
        enabled: false,
      },
    ],
  },
];