import Image from "next/image";

const RankBanner = ({ tier }: props) => {
    let formattedTier = tier?.replace(/ /g, "/")
    // console.log(tier)
    let isDiamondOrAbove = (tier?.toLowerCase().startsWith("diamond") || tier?.toLowerCase().startsWith("valhallan") || tier === null)
    let isValhallan = tier?.toLowerCase().startsWith("valhallan") || tier === null
    let height = isDiamondOrAbove
        ? (326 * 0.7) : 216
    let width = isDiamondOrAbove
        ? (190 * 0.7) : 144
    return <Image
            alt={tier}
            width={width}
            height={height}
            src={`/assets/ranks/banner/${isDiamondOrAbove ? `${isValhallan ? "Valhallan" : formattedTier}/0` : formattedTier}.png`} />
}
interface props {
    tier: "Tin 0" | "Tin 1" | "Tin 2" | "Tin 3" | "Tin 4" | "Tin 5" | "Bronze 0" | "Bronze 1" | "Bronze 2" | "Bronze 3" | "Bronze 4" | "Bronze 5" | "Silver 0" | "Silver 1" | "Silver 2" | "Silver 3" | "Silver 4" | "Silver 5" | "Gold 0" | "Gold 1" | "Gold 2" | "Gold 3" | "Gold 4" | "Gold 5" | "Platinum 0" | "Platinum 1" | "Platinum 2" | "Platinum 3" | "Platinum 4" | "Platinum 5" | "Diamond" | "Valhallan" | undefined
}
export default RankBanner