"use client";

import { SEVERITY_COLORS, SEVERITY_LABELS } from "@/lib/constants";
import type { Severity } from "@/types/inspection";

interface IssueSummaryBarProps {
  critical: number;
  major: number;
  minor: number;
  info: number;
  total: number;
}

/** 심각도별 이슈 수 요약 바 */
export function IssueSummaryBar({
  critical,
  major,
  minor,
  info,
  total,
}: IssueSummaryBarProps) {
  const items: { severity: Severity; count: number }[] = [
    { severity: "critical", count: critical },
    { severity: "major", count: major },
    { severity: "minor", count: minor },
    { severity: "info", count: info },
  ];

  return (
    <div className="flex flex-wrap items-center gap-3">
      {items.map(({ severity, count }) => (
        <div key={severity} className="flex items-center gap-1.5">
          <span
            className={`inline-flex items-center justify-center rounded px-2 py-0.5 text-xs font-semibold ${SEVERITY_COLORS[severity]}`}
          >
            {SEVERITY_LABELS[severity]}
          </span>
          <span className="text-sm font-medium">{count}</span>
        </div>
      ))}
      <div className="border-l pl-3 ml-1">
        <span className="text-sm text-muted-foreground">
          총 <span className="font-bold text-foreground">{total}</span>건
        </span>
      </div>
    </div>
  );
}