import { z } from 'zod/v4';
import { StarBorder, Star } from '@mui/icons-material';
import './Rating.css';

const RatingSchema = z.object({
  item: z.object({
    id: z.number(),
    rating: z.number(),
  }),
});

function Rating(props) {
  const result = RatingSchema.safeParse(props);

  if (!result.success) {
    console.error('Invalid Rating props:', result.error);
    return null;
  }

  const { item: validItem } = result.data;
  const ratings = [];
  for (let i = 1; i <= 5; i++) {
    ratings.push(
      <button className="ratingButton" data-value={i} key={i}>
        {validItem.rating < i ? <StarBorder /> : <Star />}
      </button>
    );
  }
  return ratings;
}

export default Rating;
