import { Box, Group, Text } from "@mantine/core";
import { format } from "date-fns";
import { memo } from "react";
import { STATUS_CONFIG, cv } from "../constants";

interface ActivityRowProps {
  booking: any;
  onClick: () => void;
}

export const ActivityRow = memo(function ActivityRow({
  booking,
  onClick,
}: ActivityRowProps) {
  const cfg = STATUS_CONFIG[booking.status] ?? STATUS_CONFIG.DRAFT;
  const Icon = cfg.icon;
  const verb =
    booking.status === "IN_TRANSIT"
      ? "departed"
      : booking.status === "COMPLETED"
        ? "delivered"
        : booking.status === "PENDING_APPROVAL"
          ? "quote ready"
          : booking.status === "SUBMITTED"
            ? "submitted for review"
            : "created";

  return (
    <Group
      gap={12}
      align="center"
      wrap="nowrap"
      py={9}
      className="cursor-pointer"
      onClick={onClick}
    >
      <Box
        w={36}
        h={36}
        bg={cfg.tile}
        className="flex shrink-0 items-center justify-center rounded-[10px]"
      >
        <Icon size={17} color={cv(cfg.iconColor)} />
      </Box>
      <Box className="min-w-0 flex-1">
        <Text fz={13} fw={600} c="edr-text" truncate>
          Booking {booking.reference} {verb}
        </Text>
        <Text fz={11} c="edr-muted" truncate>
          {booking.originYard?.label ?? booking.originYard?.code ?? "—"} →{" "}
          {booking.destinationYard?.label ??
            booking.destinationYard?.code ??
            "—"}
        </Text>
      </Box>
      <Text fz={11} c="edr-muted" className="shrink-0">
        {format(new Date(booking.createdAt), "MMM d")}
      </Text>
    </Group>
  );
});
