import { forwardRef } from 'react'

interface InputFileProps extends React.InputHTMLAttributes<HTMLInputElement> {
  id: string
  values?: string
  label: string
}

const InputFile = forwardRef<HTMLInputElement, InputFileProps>(
  ({ id, values, label, ...inputProps }, ref) => {
    return (
      <label
        htmlFor={id}
        className="flex justify-center items-center border border-dotted rounded-sm border-green-400 bg-green-400/10 cursor-pointer hover:bg-green-400/5 text-green-400 text-sm h-10 mt-6"
      >
        {values || label}
        <input
          id={id}
          type="file"
          accept="image/png, image/jpeg, image/jpg"
          className="hidden"
          ref={ref}
          {...inputProps}
        />
      </label>
    )
  },
)

InputFile.displayName = 'InputFile'

export default InputFile
