'use client';

/**
 * 재질별 폭합 테이블
 *
 * 부품 조립 하단에 표시 — components에서 material별 width_sum * quantity 합산
 */

import type { ComponentData } from './types';
import { calculateMaterialSummary } from './types';

interface MaterialSummaryProps {
  components: ComponentData[];
}

export function MaterialSummary({ components }: MaterialSummaryProps) {
  const summary = calculateMaterialSummary(components);
  const entries = Object.entries(summary);

  if (entries.length === 0) return null;

  return (
    <div className="space-y-2">
      <h3 className="text-sm font-semibold">재질별 폭합</h3>
      <table className="text-sm border-collapse">
        <thead>
          <tr className="bg-muted/50">
            <th className="border px-3 py-1.5 text-left font-medium">재질</th>
            <th className="border px-3 py-1.5 text-right font-medium">폭합계 (mm)</th>
          </tr>
        </thead>
        <tbody>
          {entries.map(([material, total]) => (
            <tr key={material}>
              <td className="border px-3 py-1.5">{material}</td>
              <td className="border px-3 py-1.5 text-right font-semibold text-blue-600">
                {total}
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}
