import { Paperclip, X } from 'lucide-react';
import { cn } from '@/lib/utils';

function formatSize(bytes: number): string {
  if (bytes < 1024) return `${bytes} B`;
  if (bytes < 1024 * 1024) return `${Math.round(bytes / 1024)} KB`;
  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
}

export function TaskAttachmentChip({
  filename,
  sizeBytes,
  onOpen,
  onDelete,
}: {
  filename: string;
  sizeBytes: number;
  onOpen: () => void;
  onDelete: () => void;
}) {
  return (
    <span
      className={cn(
        'inline-flex items-center gap-1.5 rounded-full border border-border/60 bg-background/60 px-2.5 py-1 text-xs',
      )}
    >
      <button type="button" onClick={onOpen} className="flex items-center gap-1.5 hover:underline">
        <Paperclip className="h-3 w-3" />
        <span className="max-w-[180px] truncate">{filename}</span>
        <span className="text-muted-foreground">· {formatSize(sizeBytes)}</span>
      </button>
      <button type="button" onClick={onDelete} className="text-muted-foreground hover:text-destructive">
        <X className="h-3 w-3" />
      </button>
    </span>
  );
}
