edr-platform/apps/edr-freight-web/backoffice/src/components/bookings/detail/BookingCargoCard.tsx

import { Package } from "lucide-react";
import { SimpleGrid, Divider, Box, Table, Text } from "@mantine/core";

import type { BookingDetail } from "@/types/booking";
import { cargoTonsAndItems } from "@/utils/cargoWeight";

import { SectionCard } from "./SectionCard";
import { MetricTile } from "./MetricTile";

export interface BookingCargoCardProps {
  booking: BookingDetail;
}

/** Cargo specs + container manifest table. */
export function BookingCargoCard({ booking }: BookingCargoCardProps) {
  const containers = booking.bookingContainers ?? [];
  const { tons, items } = cargoTonsAndItems(booking);

  return (
    <SectionCard icon={Package} title="Cargo specifications" accent="orange">
      <SimpleGrid cols={{ base: 1, sm: 3 }} spacing="sm">
        <MetricTile
          label="Cargo type"
          value={booking.cargoType?.label ?? booking.freightType}
        />
        <MetricTile label="Total VGM" value={`${tons} tons`} />
        {items != null && <MetricTile label="Items" value={`${items}`} />}
        <MetricTile
          label="Hazardous"
          value={booking.isHazardous ? "Yes" : "No"}
          highlight={booking.isHazardous}
        />
      </SimpleGrid>

      {containers.length > 0 && (
        <>
          <Divider my="lg" color="var(--mantine-color-gray-2)" />
          <Box style={{ overflowX: "auto" }}>
            <Table verticalSpacing="sm" horizontalSpacing="md" highlightOnHover>
              <Table.Thead>
                <Table.Tr>
                  <Table.Th>Container type</Table.Th>
                  <Table.Th>Qty</Table.Th>
                  <Table.Th>VGM / unit</Table.Th>
                </Table.Tr>
              </Table.Thead>
              <Table.Tbody>
                {containers.map((c) => (
                  <Table.Tr key={c.id}>
                    <Table.Td>
                      <Text fw={600} size="sm">
                        {c.containerType?.label ?? c.containerType?.code ?? c.containerTypeId}
                      </Text>
                    </Table.Td>
                    <Table.Td>{c.quantity}</Table.Td>
                    <Table.Td>{c.vgmPerUnitTons} t</Table.Td>
                  </Table.Tr>
                ))}
              </Table.Tbody>
            </Table>
          </Box>
        </>
      )}
    </SectionCard>
  );
}