'use client';

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 visitor 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 (
    <div className="mb-2 flex flex-wrap gap-2">
      {attachments.map((a) => (
        <div
          key={a.id}
          className="relative flex items-center gap-1.5 rounded-lg border border-gray-200 p-1 pr-4 dark:border-slate-600"
        >
          {a.previewUrl ? (
            // next/image can't take a `blob:` object URL — there's nothing at a
            // routable origin for the optimizer to fetch.
            // eslint-disable-next-line @next/next/no-img-element
            <img
              src={a.previewUrl}
              alt={a.file.name}
              className="h-9 w-9 shrink-0 rounded object-cover"
            />
          ) : (
            <span className="grid h-9 w-9 shrink-0 place-items-center rounded bg-gray-100 text-gray-500 dark:bg-slate-700 dark:text-slate-300">
              <FileText size={16} />
            </span>
          )}
          <span className="min-w-0 max-w-[120px]">
            <span className="block truncate text-xs font-semibold text-gray-700 dark:text-slate-200">
              {a.file.name}
            </span>
            <span className="block text-[10px] text-gray-400">{formatBytes(a.file.size)}</span>
          </span>
          <button
            onClick={() => onRemove(a.id)}
            aria-label={`Remove ${a.file.name}`}
            className="absolute -right-1.5 -top-1.5 grid h-4 w-4 place-items-center rounded-full bg-gray-600 text-white transition hover:bg-gray-800"
          >
            <X size={10} />
          </button>
        </div>
      ))}
    </div>
  );
}
