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

const {
	type = "text",
	name,
	label,
	placeholder,
	value,
	disabled = false,
	readonly = false,
	required = false,
	error,
	hint,
	size = "md",
	class: className = "",
	id = name,
	...attrs
} = Astro.props;

const sizes: Record<string, string> = {
	sm: "px-3 py-1.5 text-sm",
	md: "px-4 py-2 text-base",
	lg: "px-4 py-3 text-lg",
};

const inputClasses = [
	"block w-full rounded-lg border transition-colors",
	"focus:outline-none focus:ring-2 focus:ring-offset-0",
	error
		? "border-red-500 focus:border-red-500 focus:ring-red-500"
		: "border-gray-300 focus:border-blue-500 focus:ring-blue-500",
	disabled ? "bg-gray-100 cursor-not-allowed" : "bg-white",
	sizes[size],
	className,
]
	.filter(Boolean)
	.join(" ");
---

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