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

import { ErrorContainer } from './error-container';
import { ErrorItem } from './error-item';

interface ErrorMessageProps {
  name: string;
  isErrorPaddingPresent?: boolean;
  isShowError: boolean;
}

export const ErrorMessage = ({ isShowError, name, isErrorPaddingPresent = true }: ErrorMessageProps) => {
  const {
    formState: { errors },
  } = useFormContext();

  if (!isShowError) {
    return <></>;
  }
  return (
    <ErrorContainer isErrorPaddingPresent={isErrorPaddingPresent}>
      {errors[name] && <ErrorItem message={errors[name]?.message?.toString() ?? ''} />}
    </ErrorContainer>
  );
};
