Error Input

'use client';

import './ErrorInput.css';

/**
 * 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.
 */
export interface ErrorInputProps {
  id: string;
  errorMessage: string;
  value?: string;
  placeholder?: string;
  name?: string;
}

export function ErrorInput({ id, errorMessage, value = '', placeholder, name }: ErrorInputProps) {
  return (
    <>
      <div className="error-wrap" data-rk-3b29fa="">
        <input type="text" id={id} name={name} defaultValue={value} placeholder={placeholder} className="input-error" aria-invalid="true" aria-describedby={`${id}-error`} data-rk-3b29fa="" />
        <span id={`${id}-error`} className="error-msg" aria-live="polite" data-rk-3b29fa="">{errorMessage}</span>
      </div>
    </>
  );
}

export default ErrorInput;

/* ErrorInput — ported from astro-component-kit (forms/ErrorInput.astro) */

.error-wrap:where([data-rk-3b29fa]) { display: flex; flex-direction: column; gap: 0.4rem; width: 100%; box-sizing: border-box; }
.input-error:where([data-rk-3b29fa]) { 
  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:where([data-rk-3b29fa]) { font-size: 0.75rem; color: #f87171; font-weight: 500; }