---
/**
 * Rule V. A labelled field: input, select or text area in the 10px box, with
 * the filament drawn across its base on focus.
 */
import type { HTMLAttributes } from "astro/types";

type Props = {
  label: string;
  name: string;
  as?: "input" | "select" | "textarea";
  hint?: string;
  error?: string;
  options?: (string | { value: string; label: string })[];
  /** Rows for a text area. */
  rows?: number;
  class?: string;
} & HTMLAttributes<"input">;

const { label, name, as = "input", hint, error, options = [], rows, class: className, id = `f-${name}`, ...rest } = Astro.props;
const describedBy = [hint && `${id}-hint`, error && `${id}-error`].filter(Boolean).join(" ") || undefined;
const common = { id, name, class: "gk-field", "aria-describedby": describedBy, "aria-invalid": error ? ("true" as const) : undefined };
---
<div class:list={["gk-label", className]}>
  <label class="gk-label-text" for={id}>{label}</label>
  {as === "select" ? (
    <select {...common} {...(rest as object)}>
      {options.map((o) => (typeof o === "string" ? <option>{o}</option> : <option value={o.value}>{o.label}</option>))}
    </select>
  ) : as === "textarea" ? (
    <textarea {...common} rows={rows} {...(rest as object)} />
  ) : (
    <input {...common} {...rest} />
  )}
  {hint && <span class="gk-hint" id={`${id}-hint`}>{hint}</span>}
  {error && <span class="error" id={`${id}-error`}>{error}</span>}
</div>

<style>
  .error {
    font-size: 12px;
    color: var(--gk-danger);
  }
</style>