---
interface Props {
    label?: string;
    type?: "text" | "password" | "email" | "number";
    name: string;
    id?: string;
    placeholder?: string;
    value?: string | number;
    required?: boolean;
    error?: string;
    class?: string;
}

const {
    label,
    type = "text",
    name,
    id = name,
    placeholder = "",
    value = "",
    required = false,
    error,
    class: className = "",
} = Astro.props;
---

<div class:list={["form-group", className]}>
    {
        label && (
            <label class="form-label" for={id}>
                {label}
                {required && <span class="required">*</span>}
            </label>
        )
    }
    <input
        type={type}
        id={id}
        name={name}
        class:list={["input", { "input-error": error }]}
        placeholder={placeholder}
        value={value}
        required={required}
    />
    {error && <div class="input-error-message">{error}</div>}
</div>

<style>
    .required {
        color: var(--error-color);
        margin-left: 0.25rem;
    }

    .input-error {
        border-color: var(--error-color);
    }

    .input-error:focus {
        border-color: var(--error-color);
        box-shadow: 0 0 0 2px rgba(255, 107, 107, 0.2);
    }

    .input-error-message {
        color: var(--error-color);
        font-size: 0.875rem;
        margin-top: 0.5rem;
    }
</style>