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

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

interface ExternalErrorDisplayProps {
  isErrorPaddingPresent?: boolean;
  isShowAll?: boolean;
}
export const ExternalErrorDisplay = ({
  isErrorPaddingPresent = true,
  isShowAll = false,
}: ExternalErrorDisplayProps) => {
  const {
    formState: { errors },
  } = useFormContext();

  return (
    <ErrorContainer isErrorPaddingPresent={isErrorPaddingPresent}>
      {(
        Object.keys(errors)?.map((key) => <ErrorItem key={key} message={errors?.[key]?.message?.toString() ?? ''} />)
      ) }
    </ErrorContainer>
  );
};
