import { JSX } from "preact";

interface FileInputProps
  extends Omit<JSX.InputHTMLAttributes<HTMLInputElement>, "type" | "value"> {
  label?: string;
}

export default function FileInput({
  label,
  className = "",
  ...props
}: FileInputProps) {
  const inputClasses =
    `w-full block box-border rounded border border-gray-300 dark:border-gray-600 text-sm outline-none h-[38px] leading-[30px] py-1 px-1.5 dark:bg-gray-800 dark:text-gray-100 file:mr-2 file:py-1 file:px-3 file:rounded file:border-0 file:text-sm file:font-medium file:cursor-pointer file:bg-gray-100 file:text-gray-700 file:hover:bg-gray-200 file:dark:bg-gray-600 file:dark:text-gray-100 file:dark:hover:bg-gray-500 ${className}`;

  if (label) {
    return (
      <div className="mb-2">
        <label className="block mb-1 text-sm">{label}</label>
        <input type="file" className={inputClasses} {...props} />
      </div>
    );
  }

  return <input type="file" className={inputClasses} {...props} />;
}