import {
    As,
    Box,
    BoxProps,
    Icon as ChakraIcon,
    IconProps as ChakraIconProps,
    Flex,
    FlexProps,
    forwardRef,
    LayoutProps,
} from '@chakra-ui/react';

export type IconProps = FlexProps & {
    icon: As;
    color?: string;
    sizeIcon?: LayoutProps['width'];
};

export const Icon = forwardRef<IconProps, 'span'>(
    ({ icon: IconEl, 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"
                    as={IconEl}
                    width="100%"
                    minWidth="100%"
                    height="100%"
                    color={color}
                />
            </Flex>
        );
    }
);