export default function ComponentDiagrams({ dims = {} }) {
  const w = dims.overall_max_width || null, d = dims.overall_max_depth || null, h = dims.overall_height || null;
  const Box = ({ label, widthLabel, heightLabel, val }) => (
    <div className="flex flex-col items-center gap-2">
      <div className="flex h-32 w-32 items-center justify-center rounded-lg border-2 border-dashed border-violet-400/30 bg-violet-400/5">
        <span className="text-center text-xs text-slate-500">{val || 'Not yet\nmeasured'}</span>
      </div>
      <span className="text-xs font-semibold text-slate-400">{label}</span>
      {widthLabel && <span className="text-xs text-slate-500">{widthLabel}</span>}
      {heightLabel && <span className="text-xs text-slate-500">{heightLabel}</span>}
    </div>
  );
  return (
    <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
      <Box label="Front view" widthLabel={`Width: ${w ? w + ' mm' : '—'}`} heightLabel={`Height: ${h ? h + ' mm' : '—'}`} val={w && h ? `${w}×${h}` : null} />
      <Box label="Side view" widthLabel={`Depth: ${d ? d + ' mm' : '—'}`} heightLabel={`Height: ${h ? h + ' mm' : '—'}`} val={d && h ? `${d}×${h}` : null} />
      <Box label="Rear view" widthLabel={`Width: ${w ? w + ' mm' : '—'}`} heightLabel={`Height: ${h ? h + ' mm' : '—'}`} val={w && h ? `${w}×${h}` : null} />
      <Box label="Top view" widthLabel={`Width: ${w ? w + ' mm' : '—'}`} heightLabel={`Depth: ${d ? d + ' mm' : '—'}`} val={w && d ? `${w}×${d}` : null} />
    </div>
  );
}