import { FileJson, FileText, Download } from 'lucide-react';

export default function ExportControls({ count, onExport, exporting, progress }) {
  if (count === 0) return null;

  return (
    <div className="bg-slate-800 border border-slate-700 rounded-xl p-4 mb-6 flex items-center justify-between shadow-lg">
      <div className="flex items-center gap-4">
        <div className="bg-blue-500/20 text-blue-400 px-3 py-1 rounded font-mono text-sm">
          {count} Selected
        </div>
        <span className="text-slate-400 text-sm">Ready for batch export</span>
      </div>

      <div className="flex gap-3">
        <button 
          onClick={() => onExport('json')}
          disabled={exporting}
          className="flex items-center gap-2 px-4 py-2 bg-slate-700 hover:bg-slate-600 text-white rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
        >
          <FileJson size={18} />
          JSON
        </button>
        <button 
          onClick={() => onExport('csv')}
          disabled={exporting}
          className="flex items-center gap-2 px-4 py-2 bg-slate-700 hover:bg-slate-600 text-white rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
        >
          <FileText size={18} />
          CSV
        </button>
      </div>

      {exporting && (
        <div className="absolute bottom-0 left-0 w-full h-2 bg-slate-900 rounded-b overflow-hidden">
          <div 
            className="h-full bg-blue-500 transition-all duration-300 ease-out"
            style={{ width: `${progress}%` }}
          />
        </div>
      )}
    </div>
  );
}