Accordion

Cần ẩn/hiện nội dung?
├─ Nhiều sections, xếp dọc → Accordion
│   ├─ Chỉ 1 section mở tại 1 thời điểm → type="single"
│   └─ Nhiều sections mở cùng lúc → type="multiple"
├─ 1 block duy nhất ẩn/hiện → Collapsible (single AccordionItem)
├─ Chuyển view khác nhau → Tabs
└─ Content popup → Modal / Popover

interface AccordionProps {
  /** Behavior type */
  type?: 'single' | 'multiple';
  /** Active item(s) — controlled */
  value?: string | string[];
  /** Default open item(s) — uncontrolled */
  defaultValue?: string | string[];
  /** Visual variant */
  variant?: 'default' | 'bordered' | 'filled';
  /** Collapsible — cho phép đóng tất cả (type=single) */
  collapsible?: boolean;
  /** onChange callback */
  onChange?: (value: string | string[]) => void;
  children: ReactNode;
}

interface AccordionItemProps {
  /** Unique value */
  value: string;
  /** Header trigger text */
  title: string;
  /** Sub-title / description trong header */
  subtitle?: string;
  /** Disabled */
  disabled?: boolean;
  /** Custom trigger icon (thay thế chevron) */
  icon?: ReactNode;
  /** Content */
  children: ReactNode;
}

{/* FAQ accordion */}
<Accordion type="single" collapsible defaultValue="q1">
  <AccordionItem value="q1" title="Làm sao để liên kết thẻ?">
    Vào Cài đặt → Thẻ liên kết → Thêm thẻ mới...
  </AccordionItem>
  <AccordionItem value="q2" title="Phí giao dịch là bao nhiêu?">
    Miễn phí cho giao dịch dưới 500.000đ...
  </AccordionItem>
  <AccordionItem value="q3" title="Làm sao để đổi mật khẩu?">
    Vào Cài đặt → Bảo mật → Đổi mật khẩu...
  </AccordionItem>
</Accordion>

{/* Settings, multiple open */}
<Accordion type="multiple" variant="bordered">
  <AccordionItem value="general" title="Cài đặt chung">...</AccordionItem>
  <AccordionItem value="security" title="Bảo mật">...</AccordionItem>
  <AccordionItem value="notifications" title="Thông báo">...</AccordionItem>
</Accordion>