import React from 'react';

export interface StarRatingProps {
  value: number;
  readonly?: boolean;
  onChange?: (value: number) => void;
}

export function StarRating({ value, readonly = false, onChange }: StarRatingProps) {
  return React.createElement(
    'div',
    { className: 'react-star-rating', role: 'radiogroup', 'aria-label': 'star rating' },
    [1, 2, 3, 4, 5].map((score) =>
      React.createElement(
        'button',
        {
          key: score,
          type: 'button',
          disabled: readonly,
          'aria-label': `${score} stars`,
          className: score <= value ? 'star is-active' : 'star',
          onClick: () => onChange?.(score)
        },
        '*'
      )
    )
  );
}