client/src/components/Composer/FilePreview.jsx

import { FileText, MessageSquareText, X } from 'lucide-react'
import Button from '../UI/Button'

export default function FilePreview({ attachment, onPreview, onAsk, onRemove }) {
  return (
    <div className="rounded-lg border border-border bg-card p-3">
      <div className="flex items-center gap-3">
        <FileText className="h-4 w-4 shrink-0 text-muted-foreground" />
        <div className="min-w-0 flex-1">
          <div className="flex items-center justify-between gap-2">
            <div className="min-w-0">
              <p className="truncate text-sm font-medium text-foreground">{attachment.filename}</p>
              <p className="text-xs text-muted-foreground">{attachment.kind}</p>
            </div>
            <button
              type="button"
              onClick={() => onRemove(attachment.localId)}
              className="rounded-lg p-1.5 text-muted-foreground transition hover:bg-secondary hover:text-foreground"
              aria-label={`Remove ${attachment.filename}`}
            >
              <X className="h-4 w-4" />
            </button>
          </div>
          <div className="mt-2 flex flex-wrap gap-2">
            <Button variant="secondary" size="sm" onClick={() => onPreview(attachment)}>
              Preview
            </Button>
            <Button variant="ghost" size="sm" onClick={() => onAsk(attachment)}>
              <MessageSquareText className="h-4 w-4" />
              Ask
            </Button>
          </div>
        </div>
      </div>
    </div>
  )
}