import { Star } from "lucide-react";

export function Stars({ value, size = 16, onChange }: { value: number; size?: number; onChange?: (v: number) => void }) {
  return (
    <div className="flex items-center gap-0.5" aria-label={`${value.toFixed(1)} out of 5 stars`}>
      {[1, 2, 3, 4, 5].map((n) => {
        const filled = value >= n - 0.25;
        const icon = <Star width={size} height={size} className={filled ? "fill-star text-star" : "text-border"} />;
        return onChange ? (
          <button key={n} type="button" onClick={() => onChange(n)} aria-label={`${n} stars`}>{icon}</button>
        ) : (
          <span key={n}>{icon}</span>
        );
      })}
    </div>
  );
}