/**
 * @deprecated — no Hugo equivalent.
 * Renders a stored icon that can be either an image URL or an emoji string.
 * Hugo's `IconSelector` is a picker component — not a renderer. A new Hugo renderer is needed.
 */
import Box, { BoxProps } from '@material-hu/mui/Box';
import Typography from '@material-hu/mui/Typography';

import { IconInterface, IconType } from 'src/types/icons';

type Props = {
  icon: IconInterface;
  sx?: BoxProps['sx'];
  size?: number;
};

const CustomIcon = ({ icon, sx, size = 50 }: Props) => (
  <Box sx={{ height: size, width: size, flexShrink: 0, ...sx }}>
    {icon?.type === IconType.IMAGE ? (
      <Box
        component="img"
        src={icon.value}
        alt="icon"
        sx={{ width: '100%', height: '100%' }}
      />
    ) : (
      <Typography
        sx={{ fontSize: size, lineHeight: `${size}px`, color: 'initial' }}
      >
        {icon.value}
      </Typography>
    )}
  </Box>
);

export default CustomIcon;