import { Box, Group, Skeleton, Stack, Text } from "@mantine/core";
import { memo } from "react";
import { BookingRow } from "./BookingRow";
import { Card } from "./Card";
import { EmptyState } from "./EmptyState";

interface ShipmentsSectionProps {
  bookings: any[];
  isLoading: boolean;
  onBookingClick: (id: string) => void;
}

export const ShipmentsSection = memo(function ShipmentsSection({
  bookings,
  isLoading,
  onBookingClick,
}: ShipmentsSectionProps) {
  return (
    <Card className="h-full" padding={28}>
      <Group justify="space-between" align="center" mb={18} wrap="nowrap">
        <Box>
          <Text fz={19} fw={800} c="edr-text">
            My Shipments
          </Text>
          <Text fz={13} c="edr-muted">
            From draft to delivery — every booking in one place
          </Text>
        </Box>
      </Group>

      {isLoading ? (
        <Stack gap={6}>
          {[1, 2, 3, 4].map((i) => (
            <Skeleton key={i} height={64} radius="md" />
          ))}
        </Stack>
      ) : bookings.length === 0 ? (
        <EmptyState message="No bookings in this view." />
      ) : (
        <Stack gap={0}>
          {bookings.map((booking, i) => (
            <BookingRow
              key={booking.id}
              booking={booking}
              last={i === bookings.length - 1}
              onClick={() => onBookingClick(booking.id)}
            />
          ))}
        </Stack>
      )}
    </Card>
  );
});
