# RatingNode

Hiển thị dải sao đánh giá (render ra chuỗi `StarRating` của `@janbox/storefront-ui`). Hỗ trợ rating thập phân (sao được fill một phần), số lượng sao tùy chỉnh, kích thước responsive và màu tùy ý. Không phải canvas node — không chứa node con.

## Resolved name

`Rating` (displayName: `Rating`)

## Cấu trúc

```text
rating/
├── rating/            # Component thuần túy (không phụ thuộc CraftJS)
│   ├── rating.tsx     # <Rating /> — render Primitive + danh sách StarRating
│   ├── types.ts       # RatingProps
│   └── helpers.ts     # defaultProps + getRatingProps (merge default)
├── rating.node/       # CraftJS node bọc quanh <Rating />
│   ├── rating.node.tsx
│   ├── types.ts       # RatingNodeProps = RatingProps
│   └── helpers.ts     # useRatingNodeProps (transform = getRatingProps)
└── rating.inspector/  # Panel chỉnh sửa trong editor
```

`RatingNode` chỉ lo phần CraftJS (connectors, data attributes) rồi delegate xuống component `Rating`.

## Configurable props

### Top-level props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `rating` | `number` | `5` | Giá trị rating hiện tại, hỗ trợ thập phân (VD `3.5` fill nửa sao). **Bắt buộc** |
| `count` | `number` | `5` | Số lượng sao hiển thị |
| `size` | `number` | `24` | Kích thước mỗi sao (px). Hỗ trợ responsive qua `sm`, `md`, `lg` |
| `color` | `string` | `orange.600` | Màu áp dụng cho tất cả sao (CSS color string) |

`size` responsive: `size={20}` trên mobile, `md={{ size: 32 }}` phóng to trên desktop.

### `sx` props

```ts
sx?: {
  // spacing giữa các sao
  columnGap?: number

  // spacing ngoài/trong
  marginTop?: number
  marginRight?: number
  marginBottom?: number
  marginLeft?: number
  paddingTop?: number
  paddingRight?: number
  paddingBottom?: number
  paddingLeft?: 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 */ }
}
```

Container render `display: flex` với `width: fit-content`, nên `columnGap` là khoảng cách giữa các sao.

## Usage

```tsx
import { RatingNode } from '@janbox/storefront-builder';

// Cơ bản — 5 sao, rating 4.5
<RatingNode rating={4.5} />

// Tùy chỉnh số sao, kích thước, màu
<RatingNode rating={3} count={5} size={28} color="#f59e0b" />

// Size responsive
<RatingNode rating={4} size={20} md={{ size: 32 }} />

// Điều chỉnh khoảng cách giữa các sao + spacing ngoài
<RatingNode
  rating={4.5}
  sx={{
    columnGap: 8,
    marginTop: 12,
    marginBottom: 12,
  }}
/>
```

## Editor (Inspector)

### Tab Settings

- **Config**: Rating, Count, Size (responsive), Color (color picker), Column gap
- **Spacing (px)**: Margin, Padding (responsive)

### Tab Advanced

- **Shape**: Border, Border radius
- **Background**: Background

## Rules

- **Canvas**: no — không chứa node con.
- `rating` là prop bắt buộc; các prop còn lại có default qua `getRatingProps`.