import { Boxes } from "lucide-react";
import { Text, Badge, Box, Table } from "@mantine/core";

import { SectionCard } from "./SectionCard";
import type { BookingContainerView } from "./booking-detail.styles";

export interface BookingContainersCardProps {
  containers: BookingContainerView[];
}

export function BookingContainersCard({ containers }: BookingContainersCardProps) {
  return (
    <SectionCard
      icon={Boxes}
      title="Containers & Cargo"
      extra={
        <Badge color="gray" variant="light" radius="sm">
          {containers.length} line{containers.length === 1 ? "" : "s"}
        </Badge>
      }
    >
      <Box style={{ overflowX: "auto" }}>
        <Table verticalSpacing="md" 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.Th>Total VGM</Table.Th>
              <Table.Th>Size</Table.Th>
            </Table.Tr>
          </Table.Thead>
          <Table.Tbody>
            {containers.map((container) => (
              <Table.Tr key={container.id}>
                <Table.Td>
                  <Text fw={600} size="sm">
                    {container.containerType?.label}
                  </Text>
                </Table.Td>
                <Table.Td>{container.quantity}</Table.Td>
                <Table.Td>{container.vgmPerUnitTons} t</Table.Td>
                <Table.Td>
                  <Text fw={600} c="green.7" size="sm">
                    {(container.quantity * container.vgmPerUnitTons).toFixed(2)} t
                  </Text>
                </Table.Td>
                <Table.Td>
                  <Badge color="gray" variant="light" radius="sm">
                    {container.containerType?.sizeFt}FT
                  </Badge>
                </Table.Td>
              </Table.Tr>
            ))}
          </Table.Tbody>
        </Table>
      </Box>
    </SectionCard>
  );
}