import React from 'react';
import { variants } from '../configs/variants';

export interface FileUploadProps {
  id?: string;
  callback?: (e: object, id: string) => void;
  title?: string | React.ReactNode;
  variant?: keyof typeof variants;
  theme?: string;
}

const FileUpload = ({
  id = '',
  callback = () => {},
  title = '+ Upload File',
}: FileUploadProps) => (
  <div
    className="inline-block items-center justify-center border-2 border-dashed border-_-misc-selectedMedium rounded bg-_-misc-selectedLight tracking-wide cursor-pointer text-_-misc-selectedMedium  hover:bg-_-misc-selectedMedium hover:text-white hover:border-solid active:bg-_-states-accent active:border-solid active:border-_-states-accent active:text-white transition-all"
    data-c="slmr--FileUpload"
  >
    <label
      htmlFor={id}
      className="flex justify-center items-center py-4 px-20 cursor-pointer transition-all"
    >
      <span className="font-bold leading-normal cursor-pointer align-middle">
        {title}
      </span>
      <input
        id={id}
        type="file"
        className="hidden"
        onChange={(e) => callback(e || null, id)}
      />
    </label>
  </div>
);

export default FileUpload;