---
export interface Props {
  type?: 'text' | 'email' | 'password' | 'search' | 'tel' | 'url' | 'number';
  name?: string;
  id?: string;
  placeholder?: string;
  value?: string;
  required?: boolean;
  disabled?: boolean;
  readonly?: boolean;
  class?: string;
  label?: string;
  error?: string;
}

const {
  type = 'text',
  name,
  id,
  placeholder,
  value,
  required = false,
  disabled = false,
  readonly = false,
  class: className = '',
  label,
  error,
  ...rest
} = Astro.props;

const inputId = id || name;
const hasError = !!error;

const baseStyles = "w-full px-4 py-2 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 bg-white dark:bg-gray-800 border rounded-lg focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-900 transition-colors duration-200";
const normalStyles = "border-gray-300 dark:border-gray-600 focus:border-blue-500 dark:focus:border-blue-400 focus:ring-blue-500 dark:focus:ring-blue-400";
const errorStyles = "border-red-500 dark:border-red-400 focus:border-red-500 dark:focus:border-red-400 focus:ring-red-500 dark:focus:ring-red-400";
const disabledStyles = "bg-gray-50 dark:bg-gray-700 cursor-not-allowed opacity-60";

const inputClasses = `${baseStyles} ${hasError ? errorStyles : normalStyles} ${disabled ? disabledStyles : ''} ${className}`;
---

<div class="w-full">
  {label && (
    <label for={inputId} class="block mb-2 text-sm font-medium text-gray-700 dark:text-gray-300">
      {label}
      {required && <span class="text-red-500 ml-1">*</span>}
    </label>
  )}
  
  <input
    type={type}
    name={name}
    id={inputId}
    placeholder={placeholder}
    value={value}
    required={required}
    disabled={disabled}
    readonly={readonly}
    class={inputClasses}
    aria-invalid={hasError}
    aria-describedby={hasError ? `${inputId}-error` : undefined}
    {...rest}
  />
  
  {error && (
    <p id={`${inputId}-error`} class="mt-1 text-sm text-red-600 dark:text-red-400">
      {error}
    </p>
  )}
</div>