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

import { Paper, Stack, Group, Text, Title, Badge } from "@mantine/core";

import { detailStyles } from "./booking-detail.styles";

export interface BookingPaymentCardProps {
  totalAmount: number;
  currency: string;
  paymentStatus: string;
}

/** Key-figure card: total amount + payment status. Flat, lightly tinted. */
export function BookingPaymentCard({
  totalAmount,
  currency,
  paymentStatus,
}: BookingPaymentCardProps) {
  return (
    <Paper radius="md" withBorder p="xl" style={detailStyles.highlightCard}>
      <Stack gap={6}>
        <Text size="xs" c="dimmed" fw={500} tt="uppercase" lts="0.04em">
          Total Amount
        </Text>
        <Group align="flex-end" gap="xs">
          <Title order={1} fw={700} style={{ letterSpacing: "-1px", color: "#8A5304" }}>
            {totalAmount.toLocaleString(undefined, { minimumFractionDigits: 2 })}
          </Title>
          <Text fw={600} mb={6} style={{ color: "#B26C09" }}>
            {currency}
          </Text>
        </Group>
        <Badge
          color={paymentStatus === "PAID" ? "green" : "yellow"}
          variant="light"
          radius="sm"
          mt="xs"
          w="fit-content"
        >
          {paymentStatus}
        </Badge>
      </Stack>
    </Paper>
  );
}