/**
 * FormField primitive — wrapper for form inputs with label + validation
 */
const { html } = window;

export function FormField({ label, error, hint, required, children }) {
    return html`
        <div class="sw-field ${error ? 'sw-field--error' : ''}">
            ${label && html`
                <label class="sw-field__label">
                    ${label}${required && html`<span class="sw-field__required">*</span>`}
                </label>
            `}
            <div class="sw-field__control">${children}</div>
            ${error && html`<p class="sw-field__error">${error}</p>`}
            ${hint && !error && html`<p class="sw-field__hint">${hint}</p>`}
        </div>
    `;
}
