import { Loader2, Image, Link, X } from 'lucide-react';
import type { Attachment } from './types';

type AttachmentListProps = {
  attachments: Attachment[];
  onRemove: (index: number) => void;
};

export function AttachmentList({ attachments, onRemove }: AttachmentListProps) {
  if (attachments.length === 0) return null;

  return (
    <div className="mb-2 flex flex-wrap gap-1.5">
      {attachments.map((a, i) => (
        <span
          key={i}
          className="relative inline-flex items-center gap-1 px-2 py-1 text-xs bg-duck-teal/10 text-duck-teal rounded-md max-w-[240px] group"
        >
          {a.loading ? (
            <Loader2 className="h-3 w-3 shrink-0 animate-spin" />
          ) : a.type === 'image' && a.dataUrl ? (
            <img src={a.dataUrl} alt={a.filename} className="h-8 w-8 shrink-0 rounded object-cover" />
          ) : a.type === 'image' ? (
            <Image className="h-3 w-3 shrink-0" />
          ) : (
            <Link className="h-3 w-3 shrink-0" />
          )}
          <span className="truncate">
            {a.type === 'image' ? a.filename : a.loading ? 'Loading...' : a.title}
          </span>
          <button
            type="button"
            onClick={() => onRemove(i)}
            className="shrink-0 hover:text-duck-dark cursor-pointer"
          >
            <X className="h-3 w-3" />
          </button>
        </span>
      ))}
    </div>
  );
}