// Requires a stateful parent to manage the selected rating.
// Example: `num _ratingValue = 2;` in parent State class
Rating(
  name: 'rating-1', // A unique name is required for each group
  value: _ratingValue, // Managed by parent state
  onValueChanged: (newValue) {
    // Parent updates state
    setState(() => _ratingValue = newValue);
  },
  itemStyle: [Mask.star],
)

// A read-only rating does not require state management.
Rating(
  isReadOnly: true,
  value: 3,
  itemStyle: [Mask.star],
  groupAriaLabel: 'Rating: 3 out of 5',
)

// Requires a stateful parent to manage the selected rating.
Rating(
  name: 'rating-2',
  value: _ratingValue, // Managed by parent state
  onValueChanged: (newValue) => setState(() => _ratingValue = newValue), // Parent updates state
  itemStyle: [Mask.star2, BgUtil.warning],
)

// Requires a stateful parent to manage the selected rating.
// Example: `num _ratingValue = 2;` in parent State class
RatingContainer(
  name: 'rating-3',
  classes: 'gap-1', // Adds spacing between the hearts
  [
    RatingItem(
      value: 1,
      isChecked: _ratingValue == 1, // Managed by parent state
      onSelect: _handleSelect, // Parent updates state
      style: [Mask.heart, const BgUtil('bg-red-400')],
    ),
    RatingItem(
      value: 2,
      isChecked: _ratingValue == 2, // Managed by parent state
      onSelect: _handleSelect, // Parent updates state
      style: [Mask.heart, const BgUtil('bg-orange-400')],
    ),
    RatingItem(
      value: 3,
      isChecked: _ratingValue == 3, // Managed by parent state
      onSelect: _handleSelect, // Parent updates state
      style: [Mask.heart, const BgUtil('bg-yellow-400')],
    ),
    RatingItem(
      value: 4,
      isChecked: _ratingValue == 4, // Managed by parent state
      onSelect: _handleSelect, // Parent updates state
      style: [Mask.heart, const BgUtil('bg-lime-400')],
    ),
    RatingItem(
      value: 5,
      isChecked: _ratingValue == 5, // Managed by parent state
      onSelect: _handleSelect, // Parent updates state
      style: [Mask.heart, const BgUtil('bg-green-400')],
    ),
  ],
)

// Use the `classes` property with Tailwind's arbitrary variants
// to target and style the inner input elements.
Rating(
  name: 'rating-4',
  value: 2,
  classes: '[&_input]:bg-green-500',
  itemStyle: [Mask.star2],
)

// Apply size modifiers to the `style` property of the Rating container.
Rating(name: 'rating-xs', value: 2, style: [Rating.xs], itemStyle: [Mask.star2, BgUtil.warning]),
Rating(name: 'rating-sm', value: 2, style: [Rating.sm], itemStyle: [Mask.star2, BgUtil.warning]),
Rating(name: 'rating-md', value: 2, style: [Rating.md], itemStyle: [Mask.star2, BgUtil.warning]),
Rating(name: 'rating-lg', value: 2, style: [Rating.lg], itemStyle: [Mask.star2, BgUtil.warning]),
Rating(name: 'rating-xl', value: 2, style: [Rating.xl], itemStyle: [Mask.star2, BgUtil.warning]),

// Requires a stateful parent to manage the selected rating.
Rating(
  name: 'rating-10',
  value: _ratingValue, // Managed by parent state
  onValueChanged: (newValue) => setState(() => _ratingValue = newValue), // Parent updates state
  allowClear: true, // This enables the clearing functionality
  style: [Rating.lg],
  itemStyle: [Mask.star2],
)

// Requires a stateful parent to manage the selected rating.
Rating(
  name: 'rating-11',
  value: _ratingValue, // Managed by parent state
  onValueChanged: (newValue) => setState(() => _ratingValue = newValue), // Parent updates state
  allowHalf: true, // Enables half-star logic and automatically adds the `rating-half` class
  allowClear: true,
  style: [Rating.lg],
  itemStyle: [Mask.star2, BgUtil.success],
)