import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faUpload } from '@fortawesome/free-solid-svg-icons';
import styles from '../styles/index.module.css';

interface FileUploadProps {
  onFileUpload: (file: File) => void;
}

export default function FileUpload({ onFileUpload }: FileUploadProps) {
  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (file) {
      onFileUpload(file);
    }
  };

  return (
    <div className={styles.fileUpload}>
      <label
        title="Upload file"
        htmlFor="fileInput"
        className={styles.fileInputLabel}
      >
        <FontAwesomeIcon icon={faUpload} size="2x" />
        <span className={styles.uploadText}>Upload file</span>
      </label>
      <input
        type="file"
        id="fileInput"
        onChange={handleFileChange}
        className={styles.fileInput}
      />
    </div>
  );
}