import { MapPin } from "lucide-react";
import { Group, Stack, Text, Box } from "@mantine/core";

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

export interface BookingRouteCardProps {
  booking: BookingDetailView;
}

export function BookingRouteCard({ booking }: BookingRouteCardProps) {
  return (
    <SectionCard icon={MapPin} title="Shipment Route" accent="blue">
      <Group justify="space-between" align="center" wrap="nowrap" gap="xl">
        {/* Origin */}
        <Stack gap={2} style={{ flex: 1 }}>
          <Text size="xs" c="dimmed" fw={500} tt="uppercase" lts="0.04em">
            Origin
          </Text>
          <Text fw={600}>{booking.originYard?.label}</Text>
          <Text size="xs" c="dimmed">
            {booking.originYard?.code}
          </Text>
        </Stack>

        {/* Connector */}
        <Box style={{ flex: 1.4 }}>
          <Group gap={6} wrap="nowrap" align="center">
            <Box
              style={{
                width: 8,
                height: 8,
                borderRadius: "50%",
                background: "var(--freight-brand)",
                flexShrink: 0,
              }}
            />
            <Box style={detailStyles.routeLine} />
            <Box
              style={{
                width: 8,
                height: 8,
                borderRadius: "50%",
                border: "2px solid var(--mantine-color-gray-4)",
                flexShrink: 0,
              }}
            />
          </Group>
          <Text size="xs" c="dimmed" ta="center" mt={6}>
            {booking.shippingLine?.label} · {booking.serviceType?.label}
          </Text>
        </Box>

        {/* Destination */}
        <Stack gap={2} style={{ flex: 1 }} align="flex-end">
          <Text size="xs" c="dimmed" fw={500} tt="uppercase" lts="0.04em">
            Destination
          </Text>
          <Text fw={600} ta="right">
            {booking.destinationYard?.label}
          </Text>
          <Text size="xs" c="dimmed">
            {booking.destinationYard?.code}
          </Text>
        </Stack>
      </Group>
    </SectionCard>
  );
}
