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

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

export const Icon = forwardRef<HTMLDivElement, IconProps>(
    ({ 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"
                    width="100%"
                    minWidth="100%"
                    height="100%"
                    color={color}
                    asChild
                >
                    {IconEl}
                </Box>
            </Flex>
        );
    }
);

Icon.displayName = 'Icon';