import { Star } from "lucide-react";
import styles from "./RatingComponents.module.css";

interface Props {
  value: number;
  size?: number;
}

export default function RatingStarsDisplay({ value, size = 16 }: Props) {
  const stars = [1, 2, 3, 4, 5];

  return (
    <div className={styles.starsRow} aria-label={`Rating ${value} dari 5 bintang`}>
      {stars.map((s) => (
        <Star
          key={s}
          size={size}
          className={s <= value ? styles.starFilled : styles.starEmpty}
          fill={s <= value ? "currentColor" : "none"}
          aria-hidden
        />
      ))}
    </div>
  );
}