import { ReactNode, forwardRef } from 'react';

import { Box, Flex, FlexProps } from '@chakra-ui/react';

export type IconProps = FlexProps & {
  children: ReactNode;
  color?: string;
  sizeIcon?: FlexProps['width'];
};

export const Icon = forwardRef<HTMLDivElement, IconProps>(
  ({ children, color, sizeIcon = '1em', ...rest }, ref) => {
    return (
      <Flex
        flex="none"
        minWidth={sizeIcon}
        minHeight={sizeIcon}
        maxWidth={sizeIcon}
        maxHeight={sizeIcon}
        align="center"
        padding="1px"
        ref={ref}
        {...rest}
      >
        <Box
          marginX="auto"
          width="100%"
          minWidth="100%"
          height="100%"
          color={color}
          asChild
        >
          {children}
        </Box>
      </Flex>
    );
  }
);

Icon.displayName = 'Icon';
