import { Badge, Box, Group, Stack, Text } from "@mantine/core";
import { Flame } from "lucide-react";
import { hazardClassLabel, type Freight } from "@edr/types";

/**
 * The contract's dangerous-goods declaration — the UN/ADR class and UN number
 * the customer declared alongside the hazard documents. Shown wherever a
 * hazardous contract is reviewed: the cargo-scope card and the two hazardous
 * approval confirmations, so no one signs off without seeing what is moving.
 */
export function HazardDeclarationPanel({
  contract,
}: {
  contract: Pick<Freight.IContract, "hazardClass" | "unNumber">;
}) {
  const classLabel = hazardClassLabel(contract.hazardClass);

  return (
    <Group
      gap="sm"
      align="flex-start"
      wrap="nowrap"
      px="md"
      py="sm"
      style={{
        borderRadius: 12,
        border: "1px solid #F3D5D0",
        background: "#FEF7F6",
      }}
    >
      <Box
        style={{
          width: 34,
          height: 34,
          borderRadius: 10,
          flexShrink: 0,
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          background: "#FBEAE7",
          color: "#C0392B",
        }}
      >
        <Flame size={16} />
      </Box>
      <Stack gap={6} style={{ minWidth: 0 }}>
        <Text size="sm" fw={700}>
          Dangerous goods declaration
        </Text>
        <Group gap={6} wrap="wrap">
          <Badge color="red" variant="light" radius="sm" size="sm">
            {classLabel ?? "Class not declared"}
          </Badge>
          <Badge color="red" variant="light" radius="sm" size="sm">
            {contract.unNumber ? `UN ${contract.unNumber}` : "UN number not declared"}
          </Badge>
        </Group>
        <Text size="xs" c="dimmed">
          Check the declaration against the uploaded hazard documents before
          approving.
        </Text>
      </Stack>
    </Group>
  );
}