import React from 'react';
import { Flex } from './flex';
import { Typo } from './typo';

export interface FieldErrorWrapperProps {
  children?: React.ReactNode;
  error?: React.ReactNode;
}

export function FieldErrorWrapper({
  children,
  error,
}: FieldErrorWrapperProps): React.ReactNode {
  return (
    <Flex direction="column" gap="1">
      {children}
      {error ? (
        <Typo color="red" variant="caption">
          {error}
        </Typo>
      ) : null}
    </Flex>
  );
}
