import clsx from "clsx";
import React from "react";
import styles from "./index.module.scss";

interface Props {
    level: number;
    className?: string;
    style?: React.CSSProperties;
}

interface IconItem {
    leve: number;
    src: string;
    color: string;
    textColor: string;
    textBackground: string;
}

export const vipImagesMap = new Map<number, IconItem>([
    [
        1,
        {
            leve: 1,
            src: "/vip/1.webp",
            color: "#686868",
            textColor: "#485684",
            textBackground: "#d6dbf5,#8490b9",
        },
    ],
    [
        2,
        {
            leve: 2,
            src: "/vip/2.webp",
            color: "#844C4F",
            textColor: "#3a7a85   ",
            textBackground: "#dbfcff,#9ed8e2",
        },
    ],
    [
        3,
        {
            leve: 3,
            src: "/vip/3.webp",
            color: "#844C4F",
            textColor: "#574b88 ",
            textBackground: "#dee2ef ,#a499d2",
        },
    ],
    [
        4,
        {
            leve: 4,
            src: "/vip/4.webp",
            color: "#844C4F",
            textColor: "#305975",
            textBackground: "#efffff,#46a0db",
        },
    ],
    [
        5,
        {
            leve: 5,
            src: "/vip/5.webp",
            color: "#707386",
            textColor: "#573c7f",
            textBackground: "#e0d3f6,#916db8",
        },
    ],
    [
        6,
        {
            leve: 6,
            src: "/vip/6.webp",
            color: "#707386",
            textColor: "#7d4345",
            textBackground: "#feede9,#d47175",
        },
    ],
    [
        7,
        {
            leve: 7,
            src: "/vip/7.webp",
            color: "#707386",
            textColor: "#3b7e5c",
            textBackground: "#effcec,#62b58b",
        },
    ],
    [
        8,
        {
            leve: 8,
            src: "/vip/8.webp",
            color: "#894622",
            textColor: "#355278",
            textBackground: "#ffffff,#5a8fd2",
        },
    ],
    [
        9,
        {
            leve: 9,
            src: "/vip/9.webp",
            color: "#894622",
            textColor: "#473575",
            textBackground: "#f1f1ff,#795ac7",
        },
    ],
    [
        10,
        {
            leve: 10,
            src: "/vip/10.webp",
            color: "#894622",
            textColor: "#664b45",
            textBackground: "#fff6ee,#fdd181",
        },
    ],
]);

const VipIcon: React.FC<Props> = ({ level, className, style = {} }) => {
    const curVip: IconItem = React.useMemo(() => {
        return vipImagesMap.get(level || 1) as IconItem;
    }, [level]);

    return (
        <div style={style} className={clsx(className, styles.vipIcon)}>
            <img src={curVip.src} alt="" />
        </div>
    );
};

export default VipIcon;