Rating Pill

'use client';

import type { HTMLAttributes } from 'react';
import './RatingPill.css';

/**
 * RatingPill — A compact badge displaying a numeric score or rating stars.
 * Colour adapts to the score: ≥4 high, ≥3 mid, otherwise low.
 *
 * @param score - Required. Usually 0–5.
 * @param showStar - Optional. Default true.
 */
export interface RatingPillProps extends HTMLAttributes<HTMLDivElement> {
  score: number;
  showStar?: boolean;
}

export function RatingPill({ score, showStar = true, className, ...rest }: RatingPillProps) {
  const status = score >= 4 ? 'high' : score >= 3 ? 'mid' : 'low';
  return (
    <div aria-label={`Rating ${score.toFixed(1)}`} {...rest} className={['rate-pill', `rate-pill--${status}`, className].filter(Boolean).join(' ')}>
      <span className="rate-pill__val">{score.toFixed(1)}</span>
      {showStar && <span className="rate-pill__star" aria-hidden="true">★</span>}
    </div>
  );
}

export default RatingPill;

/* RatingPill — ported from astro-component-kit (feedback/RatingPill.astro) */

.rate-pill { 
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: var(--sp-1, 4px) var(--sp-3, 12px); 
  border-radius: var(--r-full, 100px); 
  font-weight: 800; 
  font-size: 0.75rem; 
  color: #fff; 
  width: fit-content; 
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.rate-pill--high { background: #10b981; }
.rate-pill--mid { background: #f59e0b; }
.rate-pill--low { background: #ef4444; }

.rate-pill__star { font-size: 0.8rem; margin-top: -1px; }
.rate-pill__val { font-family: inherit; }