import RatingStarsDisplay from "./RatingStarsDisplay";
import type { RatingSummary } from "@/types/rating";
import styles from "./RatingComponents.module.css";

interface Props {
  summary: RatingSummary;
}

const STAR_LEVELS = ["5", "4", "3", "2", "1"] as const;

export default function RatingSummaryPanel({ summary }: Props) {
  return (
    <div className={styles.summaryPanel}>
      <div className={styles.summaryHeadline}>
        <span className={styles.summaryAverage}>{summary.average.toFixed(1)}</span>
        <div className={styles.summaryHeadlineText}>
          <RatingStarsDisplay value={Math.round(summary.average)} size={18} />
          <span className={styles.summaryTotal}>{summary.total} ulasan</span>
        </div>
      </div>

      <div className={styles.summaryBreakdown}>
        {STAR_LEVELS.map((star) => {
          const count = summary.breakdown[star];
          const pct = summary.total > 0 ? Math.round((count / summary.total) * 100) : 0;
          return (
            <div key={star} className={styles.breakdownRow}>
              <span className={styles.breakdownLabel}>{star}</span>
              <div className={styles.breakdownTrack}>
                <div className={styles.breakdownFill} style={{ width: `${pct}%` }} />
              </div>
              <span className={styles.breakdownCount}>{count}</span>
            </div>
          );
        })}
      </div>
    </div>
  );
}