import { FileText, X } from 'lucide-react';
import type { Attachment } from '@/lib/attachments';

interface Props {
  attachment: Attachment;
  onRemove: (id: string) => void;
  onPreview: (attachment: Attachment) => void;
}

export function AttachmentChip({ attachment, onRemove, onPreview }: Props) {
  const lineCount = attachment.content.split('\n').length;

  const label =
    attachment.kind === 'lines' && attachment.range
      ? `${attachment.filename}:${attachment.range[0]}-${attachment.range[1]}`
      : attachment.filename;

  return (
    <div className="flex items-center gap-1.5 bg-muted/60 border border-border rounded px-2 py-0.5 text-xs font-mono">
      <button
        type="button"
        onClick={() => onPreview(attachment)}
        className="flex items-center gap-1.5 hover:bg-muted/60 transition-colors min-w-0"
      >
        <FileText className="size-3 shrink-0 text-muted-foreground" />
        <span className="truncate max-w-[200px]">{label}</span>
        <span className="text-muted-foreground whitespace-nowrap">
          +{lineCount} lines
        </span>
      </button>
      <button
        type="button"
        onClick={() => onRemove(attachment.id)}
        className="ml-0.5 rounded hover:bg-muted-foreground/20 p-0.5 shrink-0"
        aria-label="Remove attachment"
      >
        <X className="size-3" />
      </button>
    </div>
  );
}