Error Input

---
/**
 * ErrorInput — A styled input strictly formatted to demonstrate error or invalid validation states.
 * 
 * @param {string} id - The ID for the input form element.
 * @param {string} errorMessage - The message text presented below the input field.
 * @param {string} value - Default starting value mimicking failed data.
 * @param {string} placeholder - Optional standard placeholder.
 * @param {string} name - HTML name binding.
 */
interface Props {
  id: string;
  errorMessage: string;
  value?: string;
  placeholder?: string;
  name?: string;
}

const { id, errorMessage, value = '', placeholder, name } = Astro.props;
---

<div class="error-wrap">
  <input type="text" {id} {name} {value} {placeholder} class="input-error" aria-invalid="true" aria-describedby={`${id}-error`} />
  <span id={`${id}-error`} class="error-msg" aria-live="polite">{errorMessage}</span>
</div>

<style>
  .error-wrap { display: flex; flex-direction: column; gap: 0.4rem; width: 100%; box-sizing: border-box; }
  .input-error { 
    border: 1px solid var(--c-error, #ef4444) !important; 
    background: rgba(239, 68, 68, 0.05) !important; 
    padding: var(--sp-3, 0.8rem); 
    color: var(--c-text-1, #fff); 
    border-radius: var(--r-sm, 10px); outline: none; 
    font-family: inherit; font-size: 0.95rem; box-sizing: border-box;
  }
  .error-msg { font-size: 0.75rem; color: #f87171; font-weight: 500; }
</style>