Winners Podium

"use client";
 
import React from "react";
import { useRef, useState } from "react";
import confetti from "canvas-confetti";
import { motion } from "motion/react";
import Avatar from "./avatar";
 
export default function WinnersPodium({
    data,
}: {
    data: {
        link?: string;
        name?: string;
        username?: string;
        points?: string;
        position?: number;
        medalImage?: string;
        avatar?: string;
    }[];
}) {
    const ref = useRef<HTMLDivElement>(null);
    const [isConfettiActive, setIsConfettiActive] = useState(false);
 
    const handleConfetti = () => {
        if (data.length !== 0 && ref.current) {
            setIsConfettiActive(true);
            const element = ref.current;
            const viewportWidth = window.innerWidth;
            const end = Date.now() + 100;
            const colors = [
                "#a786ff",
                "#fd8bbc",
                "#eca184",
                "#f8deb1",
                "#FE9C16",
            ];
 
            const frame = () => {
                if (Date.now() > end) {
                    setIsConfettiActive(false);
                    return;
                }
 
                confetti({
                    particleCount: 5,
                    angle: 45,
                    spread: 35,
                    startVelocity: 60,
                    origin: { x: element.offsetLeft / viewportWidth, y: 0.5 },
                    colors: colors,
                });
                confetti({
                    particleCount: 5,
                    angle: 135,
                    spread: 35,
                    startVelocity: 60,
                    origin: {
                        x:
                            (element.offsetLeft + element.offsetWidth) /
                            viewportWidth,
                        y: 0.5,
                    },
                    colors: colors,
                });
 
                requestAnimationFrame(frame);
            };
            frame();
        }
    };
 
    // useEffect(() => {
    //     setTimeout(() => {
    //         handleConfetti();
    //     }, 300);
    // }, [data, ref]);
 
    return (
        <div
            ref={ref}
            className="relative overflow-hidden flex items-end justify-center  bg-gradient-to-tr from-[#f5f5f5] to-[#EEEEFF] px-2 pt-[200px]  dark:from-[#000000] dark:to-[#130F40]"
        >
            {/* <motion.button
                whileTap={{ scale: 0.95 }}
                onClick={handleConfetti}
                className="absolute bottom-5 left-5 z-10 text-xl active:text-[#f60]"
                disabled={isConfettiActive}
            >
                <ConfettiIcon />
            </motion.button> */}
            {/* 2nd */}
            <motion.div
                className="relative flex h-[180px] sm:h-[240px] md:h-[300px] w-40 justify-center rounded-tl-lg border-border-100 bg-gradient-to-tr from-[#61f4de] to-[#6e78ff]"
                initial={{ y: 410 }}
                animate={{ y: 0 }}
                transition={{
                    type: "spring",
                    stiffness: 100,
                    delay: 0.1,
                }}
            >
                <UserCard
                    name={data[1].name}
                    username={data[1].username}
                    position={data[1].position}
                    medalImage={data[1].medalImage}
                    avatar={data[1].avatar}
                />
            </motion.div>
            {/* 1st */}
            <motion.div
                className="relative flex h-[240px] sm:h-[320px] md:h-[400px] w-40 justify-center rounded-t-lg bg-gradient-to-tr from-[#e62314] to-[#f19e18]"
                initial={{ y: 510 }}
                animate={{ y: 0 }}
                transition={{
                    type: "spring",
                    stiffness: 100,
                    delay: 0.2,
                }}
            >
                <UserCard
                    name={data[0].name}
                    username={data[0].username}
                    position={data[0].position}
                    medalImage={data[0].medalImage}
                    avatar={data[0].avatar}
                />
            </motion.div>
            {/* 3rd */}
            <motion.div
                className="relative flex h-[150px] sm:h-[200px] md:h-[250px] w-40 justify-center rounded-tr-lg bg-gradient-to-tr from-[#51c26f] to-[#f2e901]"
                initial={{ y: 360 }}
                animate={{ y: 0 }}
                transition={{
                    type: "spring",
                    stiffness: 100,
                    delay: 0.3,
                }}
            >
                <UserCard
                    name={data[2].name}
                    username={data[2].username}
                    position={data[2].position}
                    medalImage={data[2].medalImage}
                    avatar={data[2].avatar}
                />
            </motion.div>
        </div>
    );
}
 
const getOrdinal = (number: number) => {
    const suffixes = ["st", "nd", "rd", "th"];
    const lastDigit = number % 10;
 
    if (lastDigit === 1 && number % 100 !== 11) {
        return number + suffixes[0];
    } else if (lastDigit === 2 && number % 100 !== 12) {
        return number + suffixes[1];
    } else if (lastDigit === 3 && number % 100 !== 13) {
        return number + suffixes[2];
    } else {
        return number + suffixes[3];
    }
};
 
const UserCard = ({
    link,
    name,
    username,
    points,
    position,
    medalImage,
    avatar,
}: {
    link?: string;
    name?: string;
    username?: string;
    points?: string;
    position?: number;
    medalImage?: string;
    avatar?: string;
}) => (
    <>
        <div className="flex flex-col items-center justify-end py-10">
            <div className="absolute top-[-82px] flex flex-col items-center justify-center">
                <Avatar name={name} src={avatar} />
                <div className="leading-[1] whitespace-nowrap text-sm sm:text-base mt-1">
                    {name}
                </div>
                {username && (
                    <div className="text-[10px] -mt-[7px]">@{username}</div>
                )}
            </div>
            <div className="flex flex-col items-center justify-center text-white">
                {medalImage ? (
                    <img
                        src={medalImage}
                        className="aspect-square w-20 object-contain"
                    />
                ) : position === 1 ? (
                    <GoldIcon className="w-20 " />
                ) : position === 2 ? (
                    <SilverIcon className="w-20" />
                ) : (
                    <BronzeIcon className="w-20" />
                )}
                {position && (
                    <div className="text-3xl font-bold">
                        {getOrdinal(position)}
                    </div>
                )}
                <div>{points}</div>
            </div>
        </div>
    </>
);
 
const ConfettiIcon = () => (
    <svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        strokeWidth="2"
        strokeLinecap="round"
        strokeLinejoin="round"
    >
        <path d="M5.8 11.3 2 22l10.7-3.79"></path>
        <path d="M4 3h.01"></path>
        <path d="M22 8h.01"></path>
        <path d="M15 2h.01"></path>
        <path d="M22 20h.01"></path>
        <path d="m22 2-2.24.75a2.9 2.9 0 0 0-1.96 3.12c.1.86-.57 1.63-1.45 1.63h-.38c-.86 0-1.6.6-1.76 1.44L14 10"></path>
        <path d="m22 13-.82-.33c-.86-.34-1.82.2-1.98 1.11c-.11.7-.72 1.22-1.43 1.22H17"></path>
        <path d="m11 2 .33.82c.34.86-.2 1.82-1.11 1.98C9.52 4.9 9 5.52 9 6.23V7"></path>
        <path d="M11 13c1.93 1.93 2.83 4.17 2 5-.83.83-3.07-.07-5-2-1.93-1.93-2.83-4.17-2-5 .83-.83 3.07.07 5 2Z"></path>
    </svg>
);
 
const GoldIcon = (props: React.SVGProps<SVGSVGElement>) => (
    <svg
        width="100%"
        height="100%"
        viewBox="0 0 79 60"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
        {...props}
    >
        <path
            d="M52.8347 10.1783H68.3147V18.0423C68.3147 21.6043 66.8907 24.8103 63.9317 27.9063C61.5747 30.3723 58.2867 32.7013 54.1497 34.8383L52.8617 34.2633V10.1783M46.7247 4.04131V38.2633L54.2867 41.6333C64.9457 36.7023 74.5077 29.2213 74.5077 18.0703V5.79331C74.5077 4.80731 73.7137 4.01331 72.7277 4.01331H46.7227V4.04031L46.7247 4.04131Z"
            fill="#CF8D1B"
        />
        <path
            d="M53.8475 35.2223C56.3965 32.7833 56.0395 33.3043 57.1085 33.2223C57.2725 33.2223 57.3825 33.3323 57.3825 33.4963C57.2725 34.5103 59.3825 36.1543 57.1085 38.5923C56.9985 38.7023 58.4785 39.6883 58.6425 39.6883C61.9585 39.9353 64.6705 42.0993 65.4385 42.7843C65.5485 42.8943 65.5485 43.0583 65.4385 43.1683C64.6165 43.8533 61.6025 46.1003 58.0945 46.0183C54.5605 45.9633 51.6555 43.6063 50.8615 42.8943C50.7515 42.7843 50.6415 42.5653 50.6695 42.4013C50.7795 41.3323 51.2995 37.6333 53.8475 35.1953V35.2223Z"
            fill="#F7C631"
        />
        <path
            d="M54.04 41.6614C64.699 36.7294 74.261 29.2494 74.261 18.0974V5.84937"
            stroke="#E3AA24"
            strokeWidth="1.699"
            strokeMiterlimit="10"
        />
        <path
            d="M71.6578 29.3314C71.575 29.3428 71.4907 29.3365 71.4106 29.3129C71.3304 29.2892 71.2562 29.2489 71.1928 29.1944C70.5628 28.5914 68.5898 26.4814 68.3158 23.7964C68.0418 21.0844 69.5208 18.6454 70.0138 17.9064C70.0336 17.8787 70.0593 17.8556 70.089 17.8388C70.1187 17.822 70.1518 17.812 70.1858 17.8093C70.2198 17.8066 70.254 17.8114 70.2859 17.8234C70.3179 17.8353 70.3469 17.8541 70.3708 17.8784C70.9728 18.4534 72.7808 20.3984 73.1928 22.9194C73.1928 23.0564 73.3028 23.0844 73.4118 22.9744C75.1378 21.0844 77.7138 20.4544 78.5358 20.3164C78.5686 20.3103 78.6023 20.3114 78.6346 20.3196C78.667 20.3277 78.6972 20.3428 78.7232 20.3636C78.7492 20.3845 78.7704 20.4108 78.7853 20.4406C78.8003 20.4704 78.8086 20.5031 78.8098 20.5364C78.8098 21.4124 78.7548 24.2894 77.0288 26.3994C75.3028 28.5094 72.5078 29.1944 71.6588 29.3594L71.6578 29.3314Z"
            fill="#F7C631"
        />
        <path
            d="M73.7399 19.0013C73.0559 18.5633 71.0279 17.1383 70.3159 14.8913C69.6039 12.6443 70.3979 10.3153 70.7259 9.57629C70.7819 9.43929 70.9459 9.38429 71.0559 9.46629C71.7129 9.87729 73.5489 11.1923 74.3439 13.2203C74.3979 13.3573 74.4809 13.3573 74.5629 13.2203C75.6859 11.3303 77.7129 10.3433 78.4259 10.0693C78.5629 10.0143 78.6999 10.0693 78.7279 10.2333C78.8919 11.0283 79.3299 13.4663 78.2349 15.5493C77.1649 17.6313 74.9469 18.7273 74.2069 19.0293C74.0532 19.0758 73.8869 19.0658 73.7399 19.0013Z"
            fill="#F7C631"
        />
        <path
            d="M73.9595 10.3704C73.2745 9.68538 71.5485 7.71238 71.5755 5.32938C71.5755 2.97238 73.3295 0.917379 74.0145 0.205379C74.0488 0.166601 74.091 0.135553 74.1383 0.11429C74.1855 0.0930264 74.2367 0.0820313 74.2885 0.0820312C74.3403 0.0820312 74.3915 0.0930264 74.4388 0.11429C74.486 0.135553 74.5282 0.166601 74.5625 0.205379C75.2475 0.890379 76.9735 2.86338 76.9465 5.24638C76.9465 7.60338 75.1925 9.65838 74.5075 10.3704C74.4732 10.4092 74.431 10.4402 74.3838 10.4615C74.3365 10.4827 74.2853 10.4937 74.2335 10.4937C74.1817 10.4937 74.1305 10.4827 74.0833 10.4615C74.036 10.4402 73.9938 10.4092 73.9595 10.3704Z"
            fill="#F7C631"
        />
        <path
            d="M26.284 10.1783V34.2633L24.996 34.8383C20.859 32.7013 17.571 30.3723 15.214 27.9063C12.255 24.8103 10.83 21.6043 10.83 18.0423V10.1783H26.311M32.449 4.04131H6.44602C5.46002 4.04131 4.66602 4.83531 4.66602 5.82131V18.0703C4.66602 29.2213 14.201 36.7023 24.886 41.6343L32.449 38.2643V4.01331V4.04131Z"
            fill="#CF8D1B"
        />
        <path
            d="M4.66504 5.79431V18.0433C4.66504 29.1953 14.201 36.6753 24.887 41.6073"
            stroke="#E3AA24"
            strokeWidth="1.699"
            strokeMiterlimit="10"
        />
        <path
            d="M25.0772 35.1403C22.5292 32.7013 22.8852 33.2223 21.8172 33.1403C21.6522 33.1403 21.5432 33.2503 21.5432 33.4143C21.6532 34.4273 19.5432 36.0713 21.8172 38.5103C21.9272 38.6203 20.4472 39.6063 20.2822 39.6063C16.9672 39.8533 14.2542 42.0173 13.4872 42.7023C13.4612 42.7271 13.4405 42.7569 13.4263 42.7899C13.4122 42.8229 13.4049 42.8584 13.4049 42.8943C13.4049 42.9303 13.4122 42.9658 13.4263 42.9988C13.4405 43.0318 13.4612 43.0616 13.4872 43.0863C14.3092 43.7713 17.3232 46.0183 20.8302 45.9363C24.3652 45.8813 27.2702 43.5243 28.0642 42.8123C28.1742 42.7023 28.2842 42.4833 28.2562 42.3193C28.1462 41.2503 27.6262 37.5513 25.0772 35.1123V35.1403ZM16.9392 37.2503C17.2142 36.3733 17.9542 33.3313 16.7482 30.6193C15.5422 27.9343 12.8022 26.4273 11.9802 26.0163C11.8432 25.9613 11.7062 26.0163 11.6512 26.1533C11.4052 27.0023 10.7202 29.7973 11.7062 32.4003C11.7612 32.5373 11.7062 32.5923 11.5422 32.5643C8.88421 31.7143 6.11721 32.5373 5.29521 32.8113C5.15821 32.8663 5.10321 33.0033 5.15821 33.1403C5.59621 33.9623 7.21321 36.6203 9.98021 37.6883C12.7202 38.7573 15.7342 37.8523 16.5842 37.5513C16.7212 37.4963 16.8582 37.3313 16.9122 37.1953L16.9392 37.2503ZM7.26721 29.2763C7.35016 29.2879 7.43462 29.2816 7.51496 29.258C7.59531 29.2344 7.66971 29.1939 7.73321 29.1393C8.36321 28.5363 10.3362 26.4273 10.6102 23.7413C10.8842 21.0293 9.40521 18.5913 8.91221 17.8513C8.89235 17.8236 8.86667 17.8005 8.83696 17.7838C8.80726 17.767 8.77424 17.7569 8.74023 17.7543C8.70622 17.7516 8.67203 17.7564 8.64007 17.7683C8.60811 17.7803 8.57915 17.799 8.55521 17.8233C7.95321 18.3983 6.14521 20.3433 5.73321 22.8653C5.73321 23.0023 5.62321 23.0293 5.51321 22.9193C3.78821 21.0293 1.21321 20.3993 0.39021 20.2623C0.357495 20.2563 0.323863 20.2574 0.291593 20.2654C0.259323 20.2735 0.229171 20.2885 0.203182 20.3093C0.177194 20.33 0.155977 20.3561 0.140971 20.3858C0.125965 20.4155 0.117521 20.4481 0.116211 20.4813C0.116211 21.3583 0.17121 24.2353 1.89721 26.3443C3.62321 28.4543 6.41821 29.1393 7.26721 29.3043V29.2763Z"
            fill="#F7C631"
        />
        <path
            d="M5.2126 18.9464C5.8976 18.5084 7.9256 17.0834 8.6376 14.8364C9.3506 12.5904 8.5556 10.2614 8.2276 9.52136C8.1726 9.38436 8.0076 9.32936 7.8976 9.41136C7.2406 9.82236 5.4046 11.1374 4.6106 13.1654C4.5556 13.3024 4.4736 13.3024 4.3906 13.1654C3.2676 11.2754 1.2406 10.2884 0.527602 10.0144C0.390602 9.95936 0.253602 10.0144 0.226602 10.1784C0.0616023 10.9734 -0.376398 13.4124 0.719602 15.4944C1.7876 17.5764 4.0076 18.6724 4.7476 18.9744C4.901 19.0206 5.06586 19.0107 5.2126 18.9464Z"
            fill="#F7C631"
        />
        <path
            d="M54.3957 41.5793C44.5597 36.4823 34.7227 36.4823 24.8857 41.5793C30.8047 45.4423 32.7227 49.3063 30.6407 53.1963C29.6267 55.0323 49.4907 54.8963 48.5327 52.9503C46.6427 49.1693 48.6147 45.3603 54.3957 41.5793Z"
            fill="#CF8D1B"
        />
        <path
            d="M46.0671 45.9083H33.0791C25.7361 45.9083 19.6261 40.2363 19.0781 32.8933L16.8041 2.23331C16.782 1.95006 16.8188 1.6653 16.9121 1.39694C17.0053 1.12858 17.1531 0.882423 17.3461 0.673929C17.5391 0.465435 17.7732 0.299117 18.0335 0.185428C18.2939 0.071739 18.575 0.0131374 18.8591 0.013306H60.2871C61.4931 0.013306 62.4521 1.02731 62.3421 2.23331L60.0681 32.8933C59.5201 40.2363 53.4101 45.9083 46.0671 45.9083Z"
            fill="#F7C631"
        />
        <path
            d="M58.5881 11.1933C56.7809 10.9771 55.0987 10.1598 53.8116 8.8728C52.5246 7.58576 51.7074 5.90357 51.4911 4.09631C51.4911 4.01331 51.3811 4.01331 51.3811 4.09631C51.1647 5.90324 50.3476 7.58508 49.0607 8.87191C47.7739 10.1587 46.0921 10.9759 44.2851 11.1923C44.2031 11.1923 44.2031 11.3023 44.2851 11.3023C46.0921 11.5187 47.7739 12.3359 49.0607 13.6227C50.3476 14.9095 51.1647 16.5914 51.3811 18.3983C51.3811 18.4813 51.4911 18.4813 51.4911 18.3983C51.7076 16.5912 52.5249 14.9093 53.8119 13.6224C55.0989 12.3356 56.781 11.5185 58.5881 11.3023C58.6701 11.3023 58.6701 11.1923 58.5881 11.1923V11.1933Z"
            fill="#FCE26A"
        />
        <path
            d="M59.4097 50.3744H19.7357C19.329 50.374 18.9262 50.4538 18.5504 50.6093C18.1746 50.7647 17.8331 50.9927 17.5456 51.2803C17.258 51.5679 17.03 51.9093 16.8745 52.2851C16.7191 52.6609 16.6393 53.0637 16.6396 53.4704V57.9914C16.6396 59.0604 17.5167 59.9644 18.6127 59.9644H60.5897C61.1122 59.962 61.6127 59.7534 61.9822 59.3839C62.3517 59.0144 62.5603 58.5139 62.5627 57.9914V53.4714C62.5632 53.0645 62.4834 52.6616 62.328 52.2856C62.1725 51.9096 61.9444 51.568 61.6567 51.2803C61.3691 50.9926 61.0274 50.7645 60.6514 50.6091C60.2755 50.4536 59.8725 50.3739 59.4657 50.3744H59.4117H59.4097Z"
            fill="#F7C631"
        />
        <path
            d="M39.5725 18.0153V5.79529C39.5725 5.00029 39.0525 4.34229 38.3395 4.12329H21.5155C21.2695 4.12329 21.0505 4.34329 21.0775 4.58929L23.1595 32.5923C23.2695 34.0163 23.6805 35.3593 24.3105 36.5653C24.6125 37.1133 25.2705 37.3593 25.8455 37.1673C33.8185 34.4553 39.5455 26.9203 39.5455 18.0423L39.5725 18.0153Z"
            fill="#FCE26A"
        />
        <path
            d="M4.9668 10.2883C5.6518 9.60335 7.3778 7.63035 7.3508 5.24635C7.3508 2.89035 5.59681 0.835348 4.91181 0.123348C4.87746 0.0845694 4.83528 0.053522 4.78805 0.0322586C4.74081 0.0109952 4.6896 0 4.63781 0C4.58601 0 4.5348 0.0109952 4.48756 0.0322586C4.44033 0.053522 4.39815 0.0845694 4.36381 0.123348C3.67881 0.808348 1.95281 2.78035 1.97981 5.16435C1.97981 7.52135 3.73381 9.57635 4.41881 10.2883C4.45315 10.3271 4.49533 10.3582 4.54256 10.3794C4.5898 10.4007 4.64101 10.4117 4.6928 10.4117C4.7446 10.4117 4.79581 10.4007 4.84305 10.3794C4.89028 10.3582 4.93246 10.3271 4.9668 10.2883ZM61.9858 37.3323C61.7118 36.4553 60.9728 33.4143 62.1778 30.7013C63.3838 28.0163 66.1238 26.5093 66.9458 26.0983C67.0828 26.0433 67.2198 26.0983 67.2738 26.2353C67.5208 27.0853 68.2058 29.8793 67.2198 32.4823C67.1648 32.6193 67.2198 32.6743 67.3838 32.6463C70.0418 31.7973 72.8088 32.6193 73.6308 32.8933C73.7678 32.9483 73.8228 33.0853 73.7678 33.2223C73.3298 34.0443 71.7128 36.7023 68.9458 37.7703C66.2058 38.8393 63.1918 37.9353 62.3418 37.6333C62.2058 37.5783 62.0688 37.4143 62.0138 37.2773L61.9858 37.3323Z"
            fill="#F7C631"
        />
    </svg>
);
 
const SilverIcon = (props: React.SVGProps<SVGSVGElement>) => (
    <svg
        xmlns="http://www.w3.org/2000/svg"
        width="100%"
        height="100%"
        fill="none"
        viewBox=" 0 0 96 60"
        {...props}
    >
        <path
            fill="#749BBF"
            d="M61.23 10.165h15.48v7.864c0 3.562-1.425 6.768-4.384 9.864-2.356 2.466-5.644 4.795-9.782 6.932l-1.287-.575V10.165m-6.138-6.137V38.25l7.562 3.37C73.34 36.69 82.903 29.209 82.903 18.058V5.78c0-.986-.795-1.78-1.781-1.78H55.119v.027ZM34.679 10.165V34.25l-1.288.575c-4.137-2.137-7.425-4.466-9.782-6.932-2.96-3.096-4.384-6.302-4.384-9.864v-7.864h15.481m6.138-6.137H14.84c-.986 0-1.78.794-1.78 1.78v12.249c0 11.151 9.534 18.632 20.22 23.564l7.563-3.37V4v.027Z"
        />
        <path
            fill="#749BBF"
            d="M62.764 41.566c-9.837-5.097-19.674-5.097-29.51 0 5.918 3.863 7.836 7.727 5.754 11.617-1.014 1.836 18.851 1.7 17.892-.246-1.89-3.781.082-7.59 5.864-11.371Z"
        />
        <path
            fill="#D0E6FB"
            d="M54.434 45.895H41.446c-7.343 0-13.453-5.672-14.001-13.015L25.171 2.22A2.06 2.06 0 0 1 27.226 0h41.429c1.205 0 2.164 1.014 2.055 2.22l-2.275 30.66c-.548 7.343-6.658 13.015-14.001 13.015Z"
        />
        <path
            fill="#FAFFFF"
            d="M47.94 18.002V5.782c0-.795-.52-1.453-1.233-1.672H29.884c-.247 0-.466.22-.439.466l2.083 28.003c.11 1.424.52 2.767 1.15 3.973.302.548.96.794 1.535.602 7.973-2.712 13.7-10.247 13.7-19.125l.027-.027ZM66.956 11.18a8.119 8.119 0 0 1-7.097-7.097c0-.083-.11-.083-.11 0a8.119 8.119 0 0 1-7.096 7.096c-.082 0-.082.11 0 .11a8.119 8.119 0 0 1 7.097 7.096c0 .083.11.083.11 0a8.119 8.119 0 0 1 7.096-7.096c.082 0 .082-.11 0-.11Z"
        />
        <path
            fill="#D0E6FB"
            d="M67.805 50.361H28.103a3.093 3.093 0 0 0-3.097 3.096v4.521c0 1.069.877 1.973 1.973 1.973h41.977a1.982 1.982 0 0 0 1.973-1.973v-4.52a3.093 3.093 0 0 0-3.096-3.097h-.028Z"
        />
    </svg>
);
 
const BronzeIcon = (props: React.SVGProps<SVGSVGElement>) => (
    <svg
        xmlns="http://www.w3.org/2000/svg"
        width="100%"
        height="100%"
        fill="none"
        viewBox=" 0 0 96 60"
        {...props}
    >
        <path
            fill="#9D6C3E"
            d="M61.23 10.165h15.48v7.864c0 3.562-1.424 6.768-4.384 9.864-2.356 2.466-5.644 4.795-9.781 6.932l-1.288-.575V10.165m-6.138-6.137V38.25l7.563 3.37c10.658-4.931 20.22-12.412 20.22-23.563V5.78c0-.986-.794-1.78-1.78-1.78H55.119v.027ZM34.679 10.165V34.25l-1.288.575c-4.137-2.137-7.425-4.466-9.782-6.932-2.96-3.096-4.384-6.302-4.384-9.864v-7.864h15.481m6.138-6.137H14.84c-.986 0-1.78.794-1.78 1.78v12.249c0 11.151 9.534 18.632 20.22 23.564l7.563-3.37V4v.027Z"
        />
        <path
            fill="#9D6C3E"
            d="M62.764 41.566c-9.837-5.097-19.674-5.097-29.51 0 5.918 3.863 7.836 7.727 5.754 11.617-1.014 1.836 18.851 1.7 17.892-.246-1.89-3.781.082-7.59 5.864-11.371Z"
        />
        <path
            fill="#CA9350"
            d="M54.434 45.895H41.446c-7.343 0-13.453-5.672-14.001-13.015L25.171 2.22A2.06 2.06 0 0 1 27.226 0h41.429c1.205 0 2.164 1.014 2.055 2.22l-2.275 30.66c-.548 7.343-6.658 13.015-14.001 13.015Z"
        />
        <path
            fill="#E2B664"
            d="M47.94 18.002V5.782c0-.795-.52-1.453-1.233-1.672H29.884c-.247 0-.466.22-.439.466l2.083 28.003c.11 1.424.52 2.767 1.15 3.973.302.548.96.794 1.535.602 7.973-2.712 13.7-10.247 13.7-19.125l.027-.027ZM58.38 41.018s1.205-.302 2.63-1.535c.712-.602 3.89-9.48 3.89-9.48.932-6.302.85-8.85.85-8.85s-3.48 14.467-7.37 19.865ZM46.707 41.593h2.055c1.48-1.123 13.974-19.837 16.385-38.004h-1.37c-3.04 19.646-13.672 33.922-17.07 38.004ZM52.352 41.593l2.246-.11c1.37-1.945 5.097-8.356 6.494-12.658 1.233-3.781 4.165-10.029 4.987-14.33l.384-5.837s-7.234 24.578-14.139 32.935h.028Z"
        />
        <path
            fill="#CA9350"
            d="M67.805 50.361H28.103a3.093 3.093 0 0 0-3.097 3.096v4.521c0 1.069.877 1.973 1.973 1.973h41.977a1.982 1.982 0 0 0 1.973-1.973v-4.52a3.093 3.093 0 0 0-3.096-3.097h-.028Z"
        />
    </svg>
);