/**
 * 대분류는 Figma 섹션을 그대로 따른다.
 * Action 391:698 · Select 391:2209 · Input 391:3733 · Navigation 391:4035 ·
 * Layout 392:5035 · Feedback 392:5381 · Help 392:5712
 */
export type ComponentGroup = {
  label: string;
  subgroups: { label: string; ids: string[] }[];
};

export const COMPONENT_GROUPS: ComponentGroup[] = [
  // 아이콘은 시안 섹션이 아니라 모든 섹션이 쓰는 기반이라 맨 앞에 둔다.
  {
    label: "Icon",
    subgroups: [{ label: "Icon", ids: ["fox-ico"] }],
  },
  // 스크롤바도 시안 섹션이 아니라 모든 화면이 쓰는 기반이라 앞쪽에 둔다.
  {
    label: "Scroll",
    subgroups: [{ label: "Scroll", ids: ["fox-scroll"] }],
  },
  {
    label: "Action",
    subgroups: [
      {
        label: "Button",
        ids: ["fox-button", "fox-text-button", "fox-link-button", "fox-icon-button"],
      },
      { label: "Group", ids: ["fox-button-group", "fox-button-panel"] },
    ],
  },
  {
    label: "Select",
    subgroups: [
      { label: "Radio", ids: ["fox-radio-icon", "fox-radio", "fox-radio-group"] },
      { label: "Checkbox", ids: ["fox-check-icon", "fox-checkbox", "fox-checkbox-group"] },
      {
        label: "Select",
        ids: ["fox-select", "fox-select-option", "fox-select-option-item", "fox-select-text"],
      },
      { label: "Tag & Chip", ids: ["fox-tag", "fox-tag-list", "fox-chip", "fox-chip-area"] },
      {
        label: "Switch",
        ids: [
          "fox-toggle-switch",
          "fox-segmented-control",
          "fox-segmented-control-item",
          "fox-toggle-quantity",
        ],
      },
      { label: "Label & Option", ids: ["fox-form-label", "fox-conditional-option"] },
    ],
  },
  {
    label: "Input",
    subgroups: [
      { label: "Text", ids: ["fox-input", "fox-text-area"] },
      {
        label: "Formatted",
        ids: ["fox-phone-number", "fox-email", "fox-certified", "fox-address"],
      },
      { label: "File", ids: ["fox-file-upload"] },
    ],
  },
  {
    label: "Navigation",
    subgroups: [
      { label: "Paging", ids: ["fox-breadcrumb", "fox-pagination"] },
      {
        label: "Carousel",
        ids: ["fox-carousel-indicator", "fox-carousel-button", "fox-carousel-area"],
      },
    ],
  },
  {
    label: "Layout",
    subgroups: [
      { label: "Table & List", ids: ["fox-table", "fox-bullet-list", "fox-sortable-list"] },
      { label: "Tab", ids: ["fox-tab"] },
      { label: "Badge", ids: ["fox-badge", "fox-badge-dot", "fox-badge-group"] },
      { label: "Disclosure", ids: ["fox-accordion", "fox-disclosure"] },
      { label: "Container", ids: ["fox-card", "fox-modal", "fox-page-header"] },
    ],
  },
  {
    label: "Feedback",
    subgroups: [
      { label: "Notification", ids: ["fox-alert", "fox-toast", "fox-snackbar", "fox-snackbar-list"] },
      { label: "Status", ids: ["fox-status-indicator", "fox-helper-text", "fox-spinner"] },
      { label: "Step", ids: ["fox-step-indicator", "fox-step-indicator-item"] },
    ],
  },
  {
    label: "Help",
    subgroups: [
      { label: "Tooltip", ids: ["fox-tooltip", "fox-tooltip-rich"] },
      { label: "Popover", ids: ["fox-popover", "fox-contextual-trigger"] },
    ],
  },
];