import type { AnyFieldApi } from "@tanstack/solid-form";
import { Show, splitProps } from "solid-js";
import type { JSX } from "solid-js/jsx-runtime";

type Props = {
  id: string;
  field: AnyFieldApi;
} & Omit<JSX.HTMLAttributes<HTMLParagraphElement>, "children" | "id">;

export function FormError(props: Props) {
  const [customProps, classProp, restProps] = splitProps(
    props,
    ["id", "field"],
    ["class"],
  );

  return (
    <Show when={customProps.field.state.meta.errors[0]}>
      {(first) => {
        const err = first();
        return (
          <p
            id={customProps.id}
            class={`text-red-400 font-semibold italic ${classProp.class}`}
            role="alert"
            aria-live="polite"
            {...restProps}
          >
            {typeof err === "string" ? err : err.message}
          </p>
        );
      }}
    </Show>
  );
}