import type { ComponentProps } from "react";
import { clsx } from "clsx";

/** Eingabefeld mit Beschriftung (#004). Mindesthoehe 44 px wie alle Klickflaechen. */
export function Feld({
  beschriftung,
  hinweis,
  mono = false,
  className,
  id,
  name,
  ...rest
}: ComponentProps<"input"> & { beschriftung: string; hinweis?: string; mono?: boolean }) {
  const feldId = id ?? `feld-${name}`;
  return (
    <div className={clsx("flex flex-col gap-1.5", className)}>
      <label htmlFor={feldId} className="text-muted text-[13px] font-medium">
        {beschriftung}
      </label>
      <input
        id={feldId}
        name={name}
        {...rest}
        className={clsx(
          "bg-bg border-border-strong text-text rounded-feld min-h-11 border px-3 text-[15px]",
          "placeholder:text-muted/70 focus-visible:border-accent",
          mono && "font-mono tracking-wide",
        )}
      />
      {hinweis && <p className="text-muted text-[12.5px]">{hinweis}</p>}
    </div>
  );
}

/** Fehlermeldung eines Formulars – mit role=alert, damit Screenreader sie vorlesen. */
export function Formularfehler({ text }: { text?: string }) {
  if (!text) return null;
  return (
    <p
      role="alert"
      className="border-danger-border bg-danger-soft text-danger rounded-box border px-3 py-2.5 text-[14px]"
    >
      {text}
    </p>
  );
}