import { Icon } from '@iconify/react/dist/iconify.js';
import { FC, useMemo } from 'react';
import { SharedIconProps } from './shared-props';

type IconRssiProps = SharedIconProps & {
  level?: number | null;
};

const IconRssi: FC<IconRssiProps> = ({ height = 24, aspect = 1, stroke = 0.5, level = null }) => {
  const width = useMemo(() => height * aspect, [height, aspect]);
  const rssiIcon = useMemo(() => {
    if (level === null) {
      return 'material-symbols-light:signal-cellular-nodata';
    } else if (level <= -80) {
      return 'material-symbols-light:signal-cellular-4-bar';
    } else if (level <= -70) {
      return 'material-symbols-light:signal-cellular-3-bar';
    } else if (level <= -60) {
      return 'material-symbols-light:signal-cellular-2-bar';
    } else if (level <= -50) {
      return 'material-symbols-light:signal-cellular-1-bar';
    } else {
      return 'material-symbols-light:signal-cellular-null';
    }
  }, [level]);

  return <Icon icon={rssiIcon} width={width} height={height} stroke={stroke} />;
};

export default IconRssi;