Rating

<!-- Interactive rating -->
<div role="radiogroup" aria-label="Rate this product" class="rating">
  <label class="rating__star">
    <input type="radio" name="rating" value="1" class="sr-only" />
    <svg class="rating__icon" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true">
      <path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.27 5.82 22 7 14.14 2 9.27l6.91-1.01L12 2z" />
    </svg>
    <span class="sr-only">1 star</span>
  </label>
  <label class="rating__star">
    <input type="radio" name="rating" value="2" class="sr-only" />
    <svg class="rating__icon" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true">
      <path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.27 5.82 22 7 14.14 2 9.27l6.91-1.01L12 2z" />
    </svg>
    <span class="sr-only">2 stars</span>
  </label>
  <label class="rating__star">
    <input type="radio" name="rating" value="3" class="sr-only" />
    <svg class="rating__icon" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true">
      <path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.27 5.82 22 7 14.14 2 9.27l6.91-1.01L12 2z" />
    </svg>
    <span class="sr-only">3 stars</span>
  </label>
  <label class="rating__star">
    <input type="radio" name="rating" value="4" class="sr-only" />
    <svg class="rating__icon" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true">
      <path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.27 5.82 22 7 14.14 2 9.27l6.91-1.01L12 2z" />
    </svg>
    <span class="sr-only">4 stars</span>
  </label>
  <label class="rating__star">
    <input type="radio" name="rating" value="5" class="sr-only" />
    <svg class="rating__icon" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true">
      <path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.27 5.82 22 7 14.14 2 9.27l6.91-1.01L12 2z" />
    </svg>
    <span class="sr-only">5 stars</span>
  </label>
</div>

<!-- Read-only rating -->
<div role="img" aria-label="Rated 4.3 out of 5 stars" class="rating rating--readonly">
  <svg class="rating__icon rating__icon--filled" viewBox="0 0 24 24" width="20" height="20" aria-hidden="true">
    <path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.27 5.82 22 7 14.14 2 9.27l6.91-1.01L12 2z"/>
  </svg>
  <!-- repeat for remaining stars, last star uses clip-path for 30% fill -->
  <span class="rating__value">4.3</span>
  <span class="rating__count">(2,847)</span>
</div>

<style>
.rating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.rating__star {
  cursor: pointer;
  display: flex;
}
.rating__icon {
  fill: var(--color-gray-300);
  transition: fill 150ms, transform 150ms;
}
.rating__star:hover .rating__icon,
.rating__star:has(input:checked) .rating__icon,
.rating__star:has(~ .rating__star input:checked) ~ .rating__star .rating__icon {
  /* Note: real implementation uses JS for proper fill-up-to logic */
  fill: var(--color-amber-400);
}
.rating__icon--filled {
  fill: var(--color-amber-400);
}
.rating__star input:focus-visible + .rating__icon {
  outline: 2px solid var(--color-primary-500);
  outline-offset: 2px;
  border-radius: 2px;
}
.rating__value {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  margin-left: var(--space-1);
}
.rating__count {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}
/* Star fill animation */
@keyframes star-pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}
.rating__star input:checked + .rating__icon {
  animation: star-pop 300ms var(--ease-spring);
}
@media (prefers-reduced-motion: reduce) {
  .rating__star input:checked + .rating__icon {
    animation: none;
  }
}
</style>

interface RatingProps {
  value?: number;
  defaultValue?: number;
  max?: number;
  precision?: 0.5 | 1;
  size?: 'sm' | 'md' | 'lg' | 'xl';
  readOnly?: boolean;
  disabled?: boolean;
  onChange?: (value: number) => void;
  onHoverChange?: (value: number | null) => void;
  label: string;
  showValue?: boolean;
  labels?: string[];
}

function Rating({
  value: controlledValue,
  defaultValue = 0,
  max = 5,
  precision = 1,
  size = 'md',
  readOnly = false,
  disabled = false,
  onChange,
  onHoverChange,
  label,
  showValue = false,
  labels,
}: RatingProps) {
  const [internalValue, setInternalValue] = React.useState(defaultValue);
  const [hoverValue, setHoverValue] = React.useState<number | null>(null);
  const value = controlledValue ?? internalValue;
  const displayValue = hoverValue ?? value;

  const iconSizes = { sm: 16, md: 24, lg: 32, xl: 48 };
  const iconSize = iconSizes[size];

  const handleSelect = (newValue: number) => {
    if (readOnly || disabled) return;
    setInternalValue(newValue);
    onChange?.(newValue);
  };

  const handleHover = (val: number | null) => {
    if (readOnly || disabled) return;
    setHoverValue(val);
    onHoverChange?.(val);
  };

  // Read-only: use role="img"
  if (readOnly) {
    return (
      <div
        className={`rating rating--readonly rating--${size}`}
        role="img"
        aria-label={`${label}: ${value} out of ${max} stars`}
      >
        {Array.from({ length: max }, (_, i) => {
          const fillPercent = Math.min(1, Math.max(0, value - i));
          return (
            <StarIcon
              key={i}
              size={iconSize}
              fillPercent={fillPercent}
            />
          );
        })}
        {showValue && <span className="rating__value">{value.toFixed(1)}</span>}
      </div>
    );
  }

  // Interactive: use radiogroup
  return (
    <div
      className={`rating rating--${size}`}
      role="radiogroup"
      aria-label={label}
      aria-disabled={disabled || undefined}
      onMouseLeave={() => handleHover(null)}
    >
      {Array.from({ length: max }, (_, i) => {
        const starValue = i + 1;
        const halfValue = i + 0.5;
        const isSelected = starValue === value;

        if (precision === 0.5) {
          return (
            <span key={i} className="rating__star-group" style={{ position: 'relative' }}>
              {/* Left half */}
              <label
                className="rating__half rating__half--left"
                onMouseEnter={() => handleHover(halfValue)}
              >
                <input
                  type="radio"
                  name="rating"
                  value={halfValue}
                  checked={value === halfValue}
                  onChange={() => handleSelect(halfValue)}
                  className="sr-only"
                  disabled={disabled}
                />
              </label>
              {/* Right half */}
              <label
                className="rating__half rating__half--right"
                onMouseEnter={() => handleHover(starValue)}
              >
                <input
                  type="radio"
                  name="rating"
                  value={starValue}
                  checked={value === starValue}
                  onChange={() => handleSelect(starValue)}
                  className="sr-only"
                  disabled={disabled}
                />
              </label>
              <StarIcon
                size={iconSize}
                fillPercent={Math.min(1, Math.max(0, displayValue - i))}
              />
              <span className="sr-only">{starValue} star{starValue !== 1 ? 's' : ''}</span>
            </span>
          );
        }

        return (
          <label
            key={i}
            className="rating__star"
            onMouseEnter={() => handleHover(starValue)}
          >
            <input
              type="radio"
              name="rating"
              value={starValue}
              checked={isSelected}
              onChange={() => handleSelect(starValue)}
              className="sr-only"
              disabled={disabled}
            />
            <StarIcon
              size={iconSize}
              fillPercent={displayValue >= starValue ? 1 : 0}
              animated={isSelected}
            />
            <span className="sr-only">{starValue} star{starValue !== 1 ? 's' : ''}</span>
          </label>
        );
      })}
      {showValue && <span className="rating__value">{displayValue}</span>}
      {labels && labels[displayValue - 1] && (
        <span className="rating__label">{labels[displayValue - 1]}</span>
      )}
    </div>
  );
}

// Star icon with partial fill support
function StarIcon({ size, fillPercent, animated }: { size: number; fillPercent: number; animated?: boolean }) {
  const id = React.useId();
  return (
    <svg
      width={size}
      height={size}
      viewBox="0 0 24 24"
      className={`rating__icon${animated ? ' rating__icon--pop' : ''}`}
      aria-hidden="true"
    >
      <defs>
        <linearGradient id={`fill-${id}`}>
          <stop offset={`${fillPercent * 100}%`} stopColor="var(--color-amber-400)" />
          <stop offset={`${fillPercent * 100}%`} stopColor="var(--color-gray-300)" />
        </linearGradient>
      </defs>
      <path
        d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.27 5.82 22 7 14.14 2 9.27l6.91-1.01L12 2z"
        fill={`url(#fill-${id})`}
      />
    </svg>
  );
}