import { type FC } from 'react';

import { isNil } from 'lodash-es';
import Box from '@material-hu/mui/Box';

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

export type WidgetIconProps = {
  icon: Icon;
  width?: string;
  height?: string;
  objectFit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
  borderRadius?: string | number;
  fontSize?: string;
};

export const WidgetIcon: FC<WidgetIconProps> = props => {
  const {
    icon,
    width = '20px',
    height = '20px',
    objectFit = 'contain',
    borderRadius,
    fontSize = height,
  } = props;

  if (!icon) return null;

  const { type, value } = icon;

  if (type === IconTypes.IMAGE) {
    return (
      <Box
        component="img"
        src={value}
        height={height}
        width={width}
        alt=""
        sx={{
          objectFit,
          objectPosition: 'center',
          ...(!isNil(borderRadius) && { borderRadius }),
        }}
      />
    );
  }

  if (type === IconTypes.EMOJI) {
    return (
      <Box
        sx={{
          height,
          width,
          lineHeight: height,
          fontSize,
          textAlign: 'center',
        }}
      >
        {value}
      </Box>
    );
  }

  return null;
};

export default WidgetIcon;