import { Truck } from "lucide-react";
import { SimpleGrid } from "@mantine/core";

import type { BookingDetail } from "@/types/booking";

import { SectionCard } from "./SectionCard";
import { MetricTile } from "./MetricTile";

export interface BookingMileServicesCardProps {
  booking: BookingDetail;
}

/** First / last mile addresses. Renders nothing when neither is present. */
export function BookingMileServicesCard({ booking }: BookingMileServicesCardProps) {
  if (!booking.firstMilePickupAddress && !booking.lastMileDeliveryAddress) {
    return null;
  }

  return (
    <SectionCard icon={Truck} title="Mile services" accent="grape">
      <SimpleGrid cols={{ base: 1, md: 2 }} spacing="sm">
        {booking.firstMilePickupAddress && (
          <MetricTile label="First mile pickup" value={booking.firstMilePickupAddress} />
        )}
        {booking.lastMileDeliveryAddress && (
          <MetricTile label="Last mile delivery" value={booking.lastMileDeliveryAddress} />
        )}
      </SimpleGrid>
    </SectionCard>
  );
}
