edr-platform/apps/edr-freight-web/backoffice/src/features/support/AttachmentDraftBar.tsx

import { ActionIcon, Box, Group, Image, Paper, Text } from "@mantine/core";
import { FileText, X } from "lucide-react";

import { formatBytes } from "./MessageAttachments";
import type { PendingAttachment } from "./useAttachmentDraft";

/**
 * The staged-files strip above the composer. Shows what will be sent and lets
 * the agent drop any of it before hitting send.
 */
export function AttachmentDraftBar({
  attachments,
  onRemove,
}: {
  attachments: PendingAttachment[];
  onRemove: (id: string) => void;
}) {
  if (attachments.length === 0) return null;

  return (
    <Group gap="xs" mb="xs" wrap="wrap">
      {attachments.map((a) => (
        <Paper
          key={a.id}
          withBorder
          radius="md"
          p={4}
          style={{ position: "relative" }}
        >
          <Group gap={6} wrap="nowrap" pr={16}>
            {a.previewUrl ? (
              <Image
                src={a.previewUrl}
                alt={a.file.name}
                w={36}
                h={36}
                radius="sm"
                fit="cover"
              />
            ) : (
              <Box
                w={36}
                h={36}
                style={{
                  display: "grid",
                  placeItems: "center",
                  background: "var(--mantine-color-gray-1)",
                  borderRadius: 4,
                }}
              >
                <FileText size={16} />
              </Box>
            )}
            <Box style={{ minWidth: 0, maxWidth: 120 }}>
              <Text size="xs" fw={600} truncate>
                {a.file.name}
              </Text>
              <Text size="10px" c="dimmed">
                {formatBytes(a.file.size)}
              </Text>
            </Box>
          </Group>
          <ActionIcon
            size="xs"
            radius="xl"
            color="gray"
            variant="filled"
            aria-label={`Remove ${a.file.name}`}
            onClick={() => onRemove(a.id)}
            style={{ position: "absolute", top: -6, right: -6 }}
          >
            <X size={10} />
          </ActionIcon>
        </Paper>
      ))}
    </Group>
  );
}