import { useFormContext, get } from 'react-hook-form';

type Props = { name: string };

export function FieldError({ name }: Props) {
  const {
    formState: { errors },
  } = useFormContext();
  const error = get(errors, name);
  if (!error?.message) return null;
  return (
    <p className="mt-1 flex items-center gap-2 font-mono text-xs text-[color:var(--color-magenta)]">
      <span className="led led-red animate-led-red" />
      <span>{String(error.message)}</span>
    </p>
  );
}