import Stack, { type StackProps } from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

import { type Icon, IconTypes } from 'src/types/icons';

type CustomIconProps = {
  icon: Icon;
  sx?: StackProps['sx'];
  size?: number;
};

const CustomIcon = ({ icon, sx, size = 50 }: CustomIconProps) => (
  <Stack sx={{ height: size, width: size, flexShrink: 0, ...sx }}>
    {icon?.type === IconTypes.IMAGE ? (
      <Stack
        component="img"
        src={icon.value}
        alt="icon"
        sx={{ width: '100%', height: '100%' }}
      />
    ) : (
      <Typography variant="globalL">{icon.value}</Typography>
    )}
  </Stack>
);

export default CustomIcon;