# AccordionGroupNode

Container cho danh sách accordion items. Quản lý open mode (single/multiple) và styling chung cho tất cả items.

## Resolved name

`AccordionGroup` (displayName: `Accordion`)

## Configurable props

### Top-level props

| Prop | Type | Description |
| --- | --- | --- |
| `openMode` | `'single' \| 'multiple'` | Single: chỉ 1 item mở cùng lúc. Multiple: nhiều items mở cùng lúc |
| `accordionSummaryProps.sx` | `StyledCSS` | Styling áp dụng cho tất cả accordion headers |
| `accordionContentProps.sx` | `StyledCSS` | Styling áp dụng cho tất cả accordion content areas |

### `sx` props

```ts
sx?: {
  // layout
  width?: number | string
  rowGap?: number  // khoảng cách giữa các items

  // spacing
  paddingTop?: number
  paddingRight?: number
  paddingBottom?: number
  paddingLeft?: number
  marginTop?: number
  marginRight?: number
  marginBottom?: number
  marginLeft?: number

  // responsive overrides
  sm?: { /* same keys above */ }
  md?: { /* same keys above */ }
  lg?: { /* same keys above */ }
}

// Styling cho headers (accordionSummaryProps.sx)
accordionSummaryProps?: {
  sx?: {
    paddingTop?: number
    paddingRight?: number
    paddingBottom?: number
    paddingLeft?: number
    // ... responsive
  }
}

// Styling cho content (accordionContentProps.sx)
accordionContentProps?: {
  sx?: {
    paddingTop?: number
    paddingRight?: number
    paddingBottom?: number
    paddingLeft?: number
    // ... responsive
  }
}
```

## Usage

```tsx
import { AccordionGroupNode, AccordionNode } from '@janbox/storefront-builder';

// Single open mode
<AccordionGroupNode
  openMode="single"
  sx={{ rowGap: 8 }}
  accordionSummaryProps={{ sx: { paddingTop: 12, paddingBottom: 12 } }}
  accordionContentProps={{ sx: { paddingTop: 16, paddingBottom: 16 } }}
>
  <AccordionNode>...</AccordionNode>
  <AccordionNode>...</AccordionNode>
</AccordionGroupNode>

// Multiple items có thể mở cùng lúc
<AccordionGroupNode
  openMode="multiple"
  sx={{
    width: '100%',
    rowGap: 4,
    md: { rowGap: 8 },
  }}
>
  <AccordionNode>...</AccordionNode>
  <AccordionNode>...</AccordionNode>
  <AccordionNode>...</AccordionNode>
</AccordionGroupNode>
```

## Rules

- **Canvas**: yes — chứa `AccordionNode` children.
- **canMoveIn**: chỉ chấp nhận `AccordionNode`.

## Related nodes

- [`AccordionNode`](../accordion/README.md) — item bên trong group
- [`AccordionSummaryNode`](../accordion-summary/README.md) — header của mỗi item
- [`AccordionContentNode`](../accordion-content/README.md) — content area của mỗi item