import { JSX } from "preact";

interface InputProps extends JSX.InputHTMLAttributes<HTMLInputElement> {
  error?: boolean;
  label?: string;
}

export default function Input({
  error = false,
  label,
  className = "",
  ...props
}: InputProps) {
  const inputClasses = `w-full block box-border rounded border ${
    error ? "border-red-600" : "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 ${className}`;

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

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