import React from 'react';
import { Button } from '@/components/ui/button';
import { FileIcon, Loader2 } from 'lucide-react';
import useFileUpload from '@/hooks/use-file-upload';

interface UploadAttendanceButtonProps {
  onFileSelected: (file: File) => void;
}

const UploadAttendanceButton: React.FC<UploadAttendanceButtonProps> = ({ onFileSelected }) => {
  const { 
    fileInputRef, 
    isSelecting, 
    triggerFileSelect, 
    handleFileChange 
  } = useFileUpload({
    acceptedTypes: ['.xlsx', '.xls', '.csv'],
    maxSizeMB: 10,
    onFileSelected
  });

  return (
    <>
      <input
        type="file"
        ref={fileInputRef}
        onChange={handleFileChange}
        accept=".xlsx,.xls,.csv"
        className="hidden"
      />
      <Button 
        variant="default" 
        className="flex items-center gap-2"
        onClick={triggerFileSelect}
        disabled={isSelecting}
      >
        {isSelecting ? (
          <Loader2 className="h-4 w-4 animate-spin" />
        ) : (
          <FileIcon className="h-4 w-4" />
        )}
        Parse Excel File
      </Button>
    </>
  );
};

export default UploadAttendanceButton;