import type { Product } from "@/lib/types";

/**
 * DimensionsTable — "Dimensions des Colis".
 * Chłodna, minimalistyczna tabela w sekcji decyzyjnej PDP.
 * Renderuje węzeł logistics.packages z Master JSON.
 * Zbija obiekcje transportowe przed dodaniem do koszyka.
 */
export function DimensionsTable({ product }: { product: Product }) {
  const { dimensions, packages } = product.logistics;

  return (
    <div className="border border-line">
      <div className="border-b border-line bg-offwhite px-5 py-3">
        <h3 className="text-[10px] font-bold uppercase tracking-[0.2em] text-ink">
          Dimensions des Colis
        </h3>
      </div>

      {/* Wymiary produktu */}
      <div className="border-b border-line px-5 py-4">
        <p className="mb-3 text-[10px] uppercase tracking-wider text-ash">
          Wymiary produktu
        </p>
        <div className="grid grid-cols-3 gap-4">
          <div>
            <p className="text-[10px] text-ash">Szerokość</p>
            <p className="text-sm font-semibold tabular-nums text-ink">
              {dimensions.width} cm
            </p>
          </div>
          <div>
            <p className="text-[10px] text-ash">Głębokość</p>
            <p className="text-sm font-semibold tabular-nums text-ink">
              {dimensions.depth} cm
            </p>
          </div>
          <div>
            <p className="text-[10px] text-ash">Wysokość</p>
            <p className="text-sm font-semibold tabular-nums text-ink">
              {dimensions.height} cm
            </p>
          </div>
        </div>
      </div>

      {/* Paczki */}
      <div className="px-5 py-4">
        <p className="mb-3 text-[10px] uppercase tracking-wider text-ash">
          Paczki ({packages.length})
        </p>
        <div className="space-y-2">
          {packages.map((pkg) => (
            <div
              key={pkg.id}
              className="flex items-center justify-between border-b border-line py-2 last:border-0"
            >
              <span className="text-xs text-graphite">{pkg.id}</span>
              <div className="flex items-center gap-6">
                <span className="text-xs tabular-nums text-graphite">
                  {pkg.dimensions}
                </span>
                <span className="text-xs tabular-nums text-graphite">
                  {pkg.weight}
                </span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}