# MarqueeNode

Auto-scrolling ticker/marquee container dùng Embla Carousel Auto Scroll. Chỉ chấp nhận `MarqueeItemNode` children.

## Resolved name

`Marquee`

## Configurable props

### Top-level props

| Prop | Type | Description |
| --- | --- | --- |
| `spaceBetween` | `number` | Khoảng cách giữa các items (px) |
| `autoScrollOptions` | `AutoScrollOptionsType` | Options từ embla-carousel-auto-scroll |
| `separatorIcon.source` | `string` | Raw SVG string cho icon phân cách giữa các items |
| `separatorIcon.size` | `number` | Kích thước separator icon (px) |
| `separatorIcon.sx.color` | `string` | Màu separator icon |

`spaceBetween` hỗ trợ responsive.

> Editor tự động set `autoScrollOptions.playOnInit = false` khi đang trong edit mode để tránh scroll khi đang drag/drop.

### `sx` props

```ts
sx?: {
  // spacing
  paddingTop?: number
  paddingRight?: number
  paddingBottom?: number
  paddingLeft?: number
  marginTop?: number
  marginRight?: number
  marginBottom?: number
  marginLeft?: number

  // border
  borderStyle?: string
  borderColor?: string
  borderTopWidth?: number
  borderRightWidth?: number
  borderBottomWidth?: number
  borderLeftWidth?: number
  borderTopLeftRadius?: number | string
  borderTopRightRadius?: number | string
  borderBottomRightRadius?: number | string
  borderBottomLeftRadius?: number | string

  // background
  backgroundColor?: string
  backgroundImage?: string
  backgroundPosition?: string
  backgroundRepeat?: string
  backgroundSize?: string
  backgroundAttachment?: string
  background?: string

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

## Usage

```tsx
import { MarqueeNode, MarqueeItemNode, ImageNode } from '@janbox/storefront-builder';

// Marquee cơ bản, auto-scroll từ đầu
<MarqueeNode
  spaceBetween={32}
  autoScrollOptions={{ speed: 1 }}
>
  <MarqueeItemNode><ImageNode src="..." alt="Logo 1" sx={{ width: 100 }} /></MarqueeItemNode>
  <MarqueeItemNode><ImageNode src="..." alt="Logo 2" sx={{ width: 100 }} /></MarqueeItemNode>
  <MarqueeItemNode><ImageNode src="..." alt="Logo 3" sx={{ width: 100 }} /></MarqueeItemNode>
</MarqueeNode>

// Với separator icon giữa các item
<MarqueeNode
  spaceBetween={24}
  separatorIcon={{
    source: '<svg>...</svg>',
    size: 16,
    sx: { color: '#fa8c16' },
  }}
>
  <MarqueeItemNode>Item 1</MarqueeItemNode>
  <MarqueeItemNode>Item 2</MarqueeItemNode>
</MarqueeNode>

// Responsive spacing
<MarqueeNode
  spaceBetween={16}
  md={{ spaceBetween: 32 }}
>
  <MarqueeItemNode>...</MarqueeItemNode>
</MarqueeNode>
```

## Rules

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

## Related nodes

- [`MarqueeItemNode`](../marquee-item/README.md) — mỗi item trong marquee