// #281 공통 별점 컴포넌트 — ReviewSection/MemoSection/MyReviewsList 재사용.
// 0.5 단위 시각 구분: 빈 별 위에 황색 절반 별을 절대배치 + clip으로 표시.

interface StarsProps {
  rating: number; // 0~5, 0.5 단위
  size?: "sm" | "md";
  showNumber?: boolean;
  className?: string;
}

export default function Stars({ rating, size = "sm", showNumber = false, className = "" }: StarsProps) {
  const r = Math.max(0, Math.min(5, rating));
  const textSize = size === "md" ? "text-base" : "text-sm";
  return (
    <span className={`inline-flex items-center gap-0.5 ${textSize} ${className}`} aria-label={`${r}점`}>
      {[1, 2, 3, 4, 5].map((i) => {
        const full = r >= i;
        const half = !full && r >= i - 0.5;
        return (
          <span key={i} className="relative inline-block leading-none">
            <span className="text-gray-300">★</span>
            {(full || half) && (
              <span
                aria-hidden="true"
                className="absolute inset-0 text-yellow-500 overflow-hidden"
                style={{ width: full ? "100%" : "50%" }}
              >
                ★
              </span>
            )}
          </span>
        );
      })}
      {showNumber && r > 0 && <span className="text-xs text-yellow-600 font-medium ml-1">{r}</span>}
    </span>
  );
}