import { ReactNode } from 'react';

import { Flex, Text } from '@chakra-ui/react';
import { MdErrorOutline, MdHelpOutline, MdRefresh } from 'react-icons/md';

export type FormGroupProps = {
  error?: ReactNode;
  help?: ReactNode;
  label?: ReactNode;
  isModify?: boolean;
  onRestore?: () => void;
  isRequired?: boolean;
  children: ReactNode;
};

export const FormGroup = ({
  children,
  error,
  help,
  label,
  isModify = false,
  isRequired = false,
  onRestore,
}: FormGroupProps) => (
  <Flex
    borderLeftWidth="3px"
    borderLeftColor={error ? 'red' : isModify ? 'blue' : '#00000000'}
    paddingLeft="7px"
    paddingY="4px"
    width="full"
    direction="column"
  >
    <Flex direction="row" width="full" gap="52px">
      {!!label && (
        <Text marginRight="auto" fontWeight="bold">
          {label}{' '}
          {isRequired && (
            <Text as="span" color="red.600">
              *
            </Text>
          )}
        </Text>
      )}
      {!!onRestore && isModify && (
        <MdRefresh size="15px" onClick={onRestore} cursor="pointer" />
      )}
    </Flex>
    {children}
    {!!help && (
      <Flex direction="row">
        <MdHelpOutline />
        <Text>{help}</Text>
      </Flex>
    )}

    {!!error && (
      <Flex direction="row">
        <MdErrorOutline />
        <Text>{error}</Text>
      </Flex>
    )}
  </Flex>
);