import Img, { type ImgProps } from '../Img';
import { styled } from '../Theme';

export interface ImageIconProps extends Omit<ImgProps, 'size' | 'src'> {
  name: string;
  size?: number;
  color?: string;
  alt?: string;
  prefix?: string;
  showBadge?: false | true;
}

export default function ImageIcon({
  name,
  size = 36,
  alt = '',
  color = '#000000',
  prefix = '/images',
  showBadge = false,
  style = {},
  ...rest
}: ImageIconProps) {
  const src = `${prefix}/${name}-${color.replace(/^#/, '')}.png`;
  return (
    <Div style={{ width: size, height: size }}>
      <Img
        width={size}
        height={size}
        alt={alt || name}
        src={src}
        style={Object.assign({ width: size }, style)}
        {...rest}
      />
      {showBadge && <i className="badge-point" />}
    </Div>
  );
}

const Div = styled('div')`
  position: relative;
  .badge-point {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 10px;
    background-color: #fe4e44;
    right: -2px;
    top: 0;
    box-shadow:
      0px 1px 4px rgba(0, 0, 0, 0.3),
      0px 0px 20px rgba(0, 0, 0, 0.1);
  }
`;
