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

import type { LucideIcon } from "lucide-react";
import type { ReactNode } from "react";
import { Hash, Package, Ship, Weight, Clock } from "lucide-react";
import { Group, Stack, Text, Divider } from "@mantine/core";

import { SectionCard } from "./SectionCard";
import { formatDate, type BookingDetailView } from "./booking-detail.styles";

interface FactRowProps {
  icon: LucideIcon;
  label: string;
  value: ReactNode;
}

function FactRow({ icon: Icon, label, value }: FactRowProps) {
  return (
    <Group justify="space-between" wrap="nowrap" py={6}>
      <Group gap="xs" wrap="nowrap">
        <Icon size={15} color="var(--mantine-color-gray-5)" />
        <Text size="sm" c="dimmed">
          {label}
        </Text>
      </Group>
      <Text size="sm" fw={600} ta="right">
        {value}
      </Text>
    </Group>
  );
}

export interface BookingFactsCardProps {
  booking: BookingDetailView;
}

/** Key/value summary of the booking's reference data. */
export function BookingFactsCard({ booking }: BookingFactsCardProps) {
  const facts: FactRowProps[] = [
    { icon: Hash, label: "PNR Code", value: booking.pnrCode || "—" },
    { icon: Package, label: "Cargo Type", value: booking.cargoType?.label ?? "—" },
    { icon: Ship, label: "Shipping Line", value: booking.shippingLine?.label ?? "—" },
    { icon: Weight, label: "VGM Weight", value: `${booking.cargoTotalWeightVgm} tons` },
    { icon: Clock, label: "Last Updated", value: formatDate(booking.updatedAt) },
  ];

  return (
    <SectionCard icon={Hash} title="Booking Details" accent="cyan">
      <Stack gap={0}>
        {facts.map((fact, index) => (
          <div key={fact.label}>
            {index > 0 && <Divider />}
            <FactRow {...fact} />
          </div>
        ))}
      </Stack>
    </SectionCard>
  );
}