import React from "react";
import { Star } from "lucide-react";

type RatingStarsProps = {
    rating: number;        // e.g. 3.5
    max?: number;          // default 5
    size?: number;         // icon size
};

const RatingStars: React.FC<RatingStarsProps> = ({
    rating,
    max = 5,
    size = 18,
}) => {
    const fullStars = Math.floor(rating);
    const hasStar = 10 - (Number((rating % 1).toFixed(1)) * 10);
    return (
        <div className="flex items-center gap-1">
            {Array.from({ length: max }).map((_, index) => {
                if (index < fullStars) {
                    return (
                        <Star
                            key={index}
                            size={size}
                            className="fill-yellow-400 text-yellow-400"
                        />
                    );
                }

                if (index === fullStars && hasStar) {
                    return (
                        <div key={index} className="relative">
                            <Star size={size} className="text-neutral-300" />
                            <Star size={size} className="absolute inset-0 fill-yellow-400 text-yellow-400" style={{ clipPath: `inset(0 ${hasStar}0% 0 0)` }} />
                        </div>
                    );
                }

                return <Star key={index} size={size} className="text-neutral-300" />
            })}
        </div>
    );
};

export default RatingStars;
