import React from 'react';
import PropTypes from 'prop-types';
import { CSVLink } from 'react-csv';
import { Download, Loader2 } from 'lucide-react';

export const CSVExport = ({ data, filename, headers, label, style, btnLoading, onClick, className = '' }) => (
  <CSVLink data={data} filename={filename} headers={headers} style={{ textDecoration: 'none' }}>
    <button
      type="button"
      disabled={btnLoading}
      onClick={(e) => onClick?.(e)}
      className={`h-9 px-3.5 bg-black hover:bg-neutral-800 active:scale-[0.98] text-white text-xs font-semibold rounded-md shadow-xs flex items-center gap-1.5 transition-all cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed ${className}`}
      style={style}
      title="CSV Export"
    >
      {btnLoading ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <Download className="w-3.5 h-3.5" />}
      <span>{label || 'CSV'}</span>
    </button>
  </CSVLink>
);

CSVExport.propTypes = {
  data: PropTypes.array,
  headers: PropTypes.any,
  filename: PropTypes.string,
  label: PropTypes.any,
  style: PropTypes.object,
  btnLoading: PropTypes.any,
  onClick: PropTypes.func,
  className: PropTypes.string
};

export default CSVExport;