# CountdownTimerNode

Đồng hồ đếm ngược đến một mốc thời gian. Hiển thị các time units (days, hours, minutes, seconds...) kèm caption.

## Resolved name

`CountdownTimer`

## Configurable props

### Top-level props

| Prop | Type | Description |
| --- | --- | --- |
| `date` | `Date` | Thời điểm đích để đếm ngược đến |
| `units` | `{ value: TimeUnit; caption?: string }[]` | Danh sách time units hiển thị, theo thứ tự |
| `hideAfterExpired` | `boolean` | Ẩn toàn bộ component sau khi hết giờ |

**`TimeUnit`:** `'months' | 'weeks' | 'days' | 'hours' | 'minutes' | 'seconds'`

### `unitItemProps.sx` — Styling cho mỗi unit box

```ts
unitItemProps?: {
  sx?: {
    width?: number | string
    rowGap?: number           // khoảng cách giữa số và caption
    paddingTop?: number
    paddingRight?: number
    paddingBottom?: number
    paddingLeft?: number
    backgroundColor?: string
    borderTopLeftRadius?: number | string
    borderTopRightRadius?: number | string
    borderBottomLeftRadius?: number | string
    borderBottomRightRadius?: number | string
  }
}
```

### `timeProps` — Styling cho số đếm

```ts
timeProps?: {
  sizeVariant?: TypographySizeVariant   // responsive
  sx?: {
    color?: string
    fontWeight?: number | string
    fontStyle?: 'normal' | 'italic'
    textDecorationLine?: 'none' | 'underline' | 'line-through'
  }
}
```

### `captionProps` — Styling cho caption (label dưới số)

```ts
captionProps?: {
  sizeVariant?: TypographySizeVariant   // responsive
  sx?: {
    color?: string
    fontWeight?: number | string
    fontStyle?: 'normal' | 'italic'
    textDecorationLine?: 'none' | 'underline' | 'line-through'
    textTransform?: 'none' | 'uppercase' | 'lowercase' | 'capitalize'
  }
}
```

### `sx` props (outer container)

```ts
sx?: {
  width?: number | string
  flexWrap?: 'nowrap' | 'wrap' | 'wrap-reverse'

  // 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 { CountdownTimerNode } from '@janbox/storefront-builder';

// Đếm ngược đến ngày sale
<CountdownTimerNode
  date={new Date('2026-12-31T23:59:59')}
  units={[
    { value: 'days',    caption: 'Days' },
    { value: 'hours',   caption: 'Hours' },
    { value: 'minutes', caption: 'Mins' },
    { value: 'seconds', caption: 'Secs' },
  ]}
  hideAfterExpired={false}
  sx={{ columnGap: 8 }}
  unitItemProps={{
    sx: {
      width: 64,
      paddingTop: 8,
      paddingBottom: 8,
      backgroundColor: '#fa8c16',
      borderTopLeftRadius: 8,
      borderTopRightRadius: 8,
      borderBottomLeftRadius: 8,
      borderBottomRightRadius: 8,
    },
  }}
  timeProps={{
    sizeVariant: '2xl',
    sx: { color: '#ffffff', fontWeight: 700 },
  }}
  captionProps={{
    sizeVariant: 'xs',
    sx: { color: '#ffffff', textTransform: 'uppercase' },
  }}
/>
```

## Rules

- **Canvas**: no — không chứa node con.
- Khi editor đang bật, component hiển thị placeholder nếu `units` rỗng hoặc đã hết giờ với `hideAfterExpired: true`.