/** نمایش امتیاز ستاره‌ای (۰ تا ۵ با کسر) */
import { faNumber } from "@/lib/format";

const STAR = "M12 3.6l2.5 5.2 5.7.8-4.1 4 1 5.6L12 16.5l-5.1 2.7 1-5.6-4.1-4 5.7-.8L12 3.6z";

export function Stars({ rating, count, size = 13 }: { rating: number; count?: number; size?: number }) {
  return (
    <span className="inline-flex items-center gap-1.5" aria-label={`امتیاز ${faNumber(rating)} از ۵`}>
      <span className="flex gap-px" dir="ltr">
        {[0, 1, 2, 3, 4].map((i) => {
          const fill = Math.max(0, Math.min(1, rating - i));
          return (
            <svg key={i} width={size} height={size} viewBox="0 0 24 24" aria-hidden="true">
              <path d={STAR} fill="none" stroke="currentColor" strokeWidth="1.4" />
              <clipPath id={`st${i}-${Math.round(fill * 10)}`}>
                <rect x="0" y="0" width={24 * fill} height="24" />
              </clipPath>
              <path d={STAR} fill="currentColor" clipPath={`url(#st${i}-${Math.round(fill * 10)})`} />
            </svg>
          );
        })}
      </span>
      {count !== undefined && <span className="text-xs text-muted">({faNumber(count)})</span>}
    </span>
  );
}