import { InputHTMLAttributes, ReactNode } from 'react';

interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
  error?: boolean;
  errorMessage?: string;
}

export default function Input({
  error = false,
  errorMessage,
  className = '',
  ...props
}: InputProps) {
  const baseStyles = 'block w-full rounded-md border-0 px-4 py-3 bg-iron-gray text-white shadow-sm ring-1 ring-inset placeholder:text-gray-500 focus:ring-2 focus:ring-inset focus:ring-primary-blue transition-all duration-150 sm:text-sm sm:leading-6';
  const errorStyles = error ? 'ring-warning-amber' : 'ring-charcoal-outline';

  return (
    <div className="w-full">
      <input
        className={`${baseStyles} ${errorStyles} ${className}`}
        aria-invalid={error}
        {...props}
      />
      {error && errorMessage && (
        <p className="mt-2 text-sm text-warning-amber">
          {errorMessage}
        </p>
      )}
    </div>
  );
}