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"} text-sm outline-none h-[38px] leading-[30px] py-1 px-1.5 ${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} />;
}