import React from 'react';
import { useLocation, useNavigate } from 'react-router-dom';

interface SidebarProps {
    companyName?: string;
    collapsed?: boolean;
}

export default function Sidebar({ companyName = "Zitlac Media", collapsed = false }: SidebarProps) {
    const location = useLocation();
    const navigate = useNavigate();

    const navItems = [
        {
            icon: (
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M7.5 17.5V11.3333C7.5 10.8666 7.5 10.6333 7.59083 10.455C7.67072 10.2982 7.79821 10.1707 7.95501 10.0908C8.13327 9.99999 8.36662 9.99999 8.83333 9.99999H11.1667C11.6334 9.99999 11.8667 9.99999 12.045 10.0908C12.2018 10.1707 12.3293 10.2982 12.4092 10.455C12.5 10.6333 12.5 10.8666 12.5 11.3333V17.5M9.18141 2.30333L3.52949 6.69927C3.15168 6.99312 2.96278 7.14005 2.82669 7.32405C2.70614 7.48704 2.61633 7.67065 2.56169 7.86588C2.5 8.08627 2.5 8.32558 2.5 8.80421V14.8333C2.5 15.7667 2.5 16.2335 2.68166 16.59C2.84144 16.9036 3.09641 17.1585 3.41002 17.3183C3.76654 17.5 4.23325 17.5 5.16667 17.5H14.8333C15.7668 17.5 16.2335 17.5 16.59 17.3183C16.9036 17.1585 17.1586 16.9036 17.3183 16.59C17.5 16.2335 17.5 15.7667 17.5 14.8333V8.80421C17.5 8.32558 17.5 8.08627 17.4383 7.86588C17.3837 7.67065 17.2939 7.48704 17.1733 7.32405C17.0372 7.14005 16.8483 6.99312 16.4705 6.69927L10.8186 2.30333C10.5258 2.07562 10.3794 1.96177 10.2178 1.918C10.0752 1.87938 9.92484 1.87938 9.78221 1.918C9.62057 1.96177 9.47418 2.07562 9.18141 2.30333Z" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                </svg>
            ),
            label: "Company Wiki",
            path: "/company-wiki",
            active: location.pathname === "/company-wiki"
        },
        {
            icon: (
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M11.6663 9.16666H6.66634M8.33301 12.5H6.66634M13.333 5.83332H6.66634M16.6663 5.66666V14.3333C16.6663 15.7335 16.6663 16.4335 16.3939 16.9683C16.1542 17.4387 15.7717 17.8212 15.3013 18.0608C14.7665 18.3333 14.0665 18.3333 12.6663 18.3333H7.33301C5.93288 18.3333 5.23281 18.3333 4.69803 18.0608C4.22763 17.8212 3.84517 17.4387 3.60549 16.9683C3.33301 16.4335 3.33301 15.7335 3.33301 14.3333V5.66666C3.33301 4.26653 3.33301 3.56646 3.60549 3.03168C3.84517 2.56128 4.22763 2.17882 4.69803 1.93914C5.23281 1.66666 5.93288 1.66666 7.33301 1.66666H12.6663C14.0665 1.66666 14.7665 1.66666 15.3013 1.93914C15.7717 2.17882 16.1542 2.56128 16.3939 3.03168C16.6663 3.56646 16.6663 4.26653 16.6663 5.66666Z" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                </svg>
            ),
            label: "Submissions",
            path: "/submissions",
            active: location.pathname === "/submissions"
        },
        {
            icon: (
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <g clipPath="url(#clip0_914_468)">
                        <path d="M10.0003 1.66666C11.0947 1.66666 12.1783 1.8822 13.1894 2.30099C14.2004 2.71978 15.1191 3.33361 15.8929 4.10744C16.6667 4.88126 17.2805 5.79992 17.6993 6.81097C18.1181 7.82201 18.3337 8.90565 18.3337 10M10.0003 1.66666V9.99999M10.0003 1.66666C5.39795 1.66666 1.66699 5.39762 1.66699 9.99999C1.66699 14.6024 5.39795 18.3333 10.0003 18.3333C14.6027 18.3333 18.3337 14.6024 18.3337 10M10.0003 1.66666C14.6027 1.66666 18.3337 5.39762 18.3337 10M18.3337 10L10.0003 9.99999M18.3337 10C18.3337 11.3151 18.0224 12.6115 17.4254 13.7832C16.8283 14.955 15.9625 15.9688 14.8985 16.7418L10.0003 9.99999" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                    </g>
                    <defs>
                        <clipPath id="clip0_914_468">
                            <rect width="20" height="20" fill="white" />
                        </clipPath>
                    </defs>
                </svg>
            ),
            label: "Reports",
            path: "/reports",
            active: location.pathname === "/reports" || location.pathname === "/"
        },
        {
            icon: (
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M17.4999 9.58333C17.4999 13.4953 14.3285 16.6667 10.4165 16.6667C9.5192 16.6667 8.66086 16.4998 7.87081 16.1954C7.72637 16.1398 7.65415 16.112 7.59671 16.0987C7.54022 16.0857 7.49933 16.0803 7.4414 16.0781C7.3825 16.0758 7.31789 16.0825 7.18865 16.0958L2.92113 16.537C2.51427 16.579 2.31083 16.6001 2.19083 16.5269C2.08631 16.4631 2.01512 16.3566 1.99617 16.2356C1.97441 16.0968 2.07162 15.9168 2.26605 15.557L3.62909 13.034C3.74135 12.8262 3.79747 12.7223 3.82289 12.6225C3.848 12.5238 3.85407 12.4527 3.84604 12.3512C3.83791 12.2484 3.79283 12.1147 3.70266 11.8472C3.46306 11.1363 3.33318 10.375 3.33318 9.58333C3.33318 5.67132 6.5045 2.5 10.4165 2.5C14.3285 2.5 17.4999 5.67132 17.4999 9.58333Z" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                </svg>
            ),
            label: "Chat",
            path: "/chat",
            active: location.pathname === "/chat"
        },
        {
            icon: (
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <g clipPath="url(#clip0_914_474)">
                        <path d="M7.57533 7.50001C7.77125 6.94306 8.15795 6.47343 8.66695 6.17428C9.17596 5.87514 9.77441 5.76579 10.3563 5.8656C10.9382 5.96541 11.466 6.26794 11.8462 6.71961C12.2264 7.17128 12.4345 7.74294 12.4337 8.33334C12.4337 10 9.93366 10.8333 9.93366 10.8333M10.0003 14.1667H10.0087M18.3337 10C18.3337 14.6024 14.6027 18.3333 10.0003 18.3333C5.39795 18.3333 1.66699 14.6024 1.66699 10C1.66699 5.39763 5.39795 1.66667 10.0003 1.66667C14.6027 1.66667 18.3337 5.39763 18.3337 10Z" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                    </g>
                    <defs>
                        <clipPath id="clip0_914_474">
                            <rect width="20" height="20" fill="white" />
                        </clipPath>
                    </defs>
                </svg>
            ),
            label: "Help",
            path: "/help",
            active: location.pathname === "/help"
        }
    ];

    const settingsIcon = (
        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <g clipPath="url(#clip0_914_477)">
                <path d="M10.0003 12.5C11.381 12.5 12.5003 11.3807 12.5003 10C12.5003 8.61929 11.381 7.5 10.0003 7.5C8.61961 7.5 7.50033 8.61929 7.50033 10C7.50033 11.3807 8.61961 12.5 10.0003 12.5Z" stroke="var(--Neutrals-NeutralSlate400, #A4A7AE)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                <path d="M15.6064 12.2727C15.5055 12.5012 15.4755 12.7547 15.52 13.0004C15.5646 13.2462 15.6817 13.473 15.8564 13.6515L15.9018 13.697C16.0427 13.8377 16.1545 14.0048 16.2307 14.1887C16.307 14.3727 16.3462 14.5698 16.3462 14.7689C16.3462 14.9681 16.307 15.1652 16.2307 15.3492C16.1545 15.5331 16.0427 15.7002 15.9018 15.8409C15.7611 15.9818 15.594 16.0935 15.4101 16.1698C15.2261 16.246 15.029 16.2853 14.8299 16.2853C14.6308 16.2853 14.4336 16.246 14.2497 16.1698C14.0657 16.0935 13.8986 15.9818 13.7579 15.8409L13.7124 15.7955C13.5339 15.6208 13.3071 15.5036 13.0614 15.4591C12.8156 15.4145 12.5622 15.4446 12.3337 15.5455C12.1096 15.6415 11.9185 15.8009 11.7839 16.0042C11.6493 16.2074 11.5771 16.4456 11.5761 16.6894V16.8182C11.5761 17.22 11.4165 17.6054 11.1323 17.8896C10.8482 18.1737 10.4628 18.3333 10.0609 18.3333C9.65909 18.3333 9.2737 18.1737 8.98956 17.8896C8.70541 17.6054 8.54578 17.22 8.54578 16.8182V16.75C8.53991 16.4992 8.45875 16.2561 8.31283 16.052C8.16692 15.848 7.963 15.6926 7.7276 15.6061C7.4991 15.5052 7.24563 15.4751 6.99988 15.5197C6.75413 15.5643 6.52736 15.6814 6.34881 15.8561L6.30336 15.9015C6.16264 16.0424 5.99554 16.1541 5.8116 16.2304C5.62766 16.3066 5.4305 16.3459 5.23139 16.3459C5.03227 16.3459 4.83511 16.3066 4.65117 16.2304C4.46724 16.1541 4.30013 16.0424 4.15942 15.9015C4.01854 15.7608 3.90679 15.5937 3.83054 15.4098C3.75429 15.2258 3.71504 15.0287 3.71504 14.8295C3.71504 14.6304 3.75429 14.4333 3.83054 14.2493C3.90679 14.0654 4.01854 13.8983 4.15942 13.7576L4.20487 13.7121C4.37952 13.5336 4.49668 13.3068 4.54124 13.0611C4.5858 12.8153 4.55572 12.5618 4.45487 12.3333C4.35884 12.1093 4.19938 11.9182 3.99613 11.7836C3.79288 11.649 3.55471 11.5767 3.31093 11.5758H3.18214C2.7803 11.5758 2.39492 11.4161 2.11077 11.132C1.82662 10.8478 1.66699 10.4624 1.66699 10.0606C1.66699 9.65876 1.82662 9.27338 2.11077 8.98923C2.39492 8.70509 2.7803 8.54545 3.18214 8.54545H3.25033C3.50108 8.53959 3.74427 8.45842 3.94828 8.31251C4.15229 8.16659 4.30769 7.96268 4.39427 7.72727C4.49511 7.49878 4.52519 7.24531 4.48063 6.99955C4.43607 6.7538 4.31891 6.52703 4.14427 6.34848L4.09881 6.30303C3.95794 6.16231 3.84618 5.99521 3.76993 5.81127C3.69368 5.62734 3.65444 5.43018 3.65444 5.23106C3.65444 5.03195 3.69368 4.83478 3.76993 4.65085C3.84618 4.46691 3.95794 4.29981 4.09881 4.15909C4.23953 4.01822 4.40663 3.90646 4.59057 3.83021C4.7745 3.75396 4.97167 3.71472 5.17078 3.71472C5.36989 3.71472 5.56706 3.75396 5.75099 3.83021C5.93493 3.90646 6.10203 4.01822 6.24275 4.15909L6.2882 4.20455C6.46675 4.37919 6.69352 4.49635 6.93927 4.54091C7.18503 4.58547 7.4385 4.55539 7.66699 4.45455H7.7276C7.95167 4.35851 8.14276 4.19906 8.27737 3.99581C8.41197 3.79256 8.4842 3.55438 8.48517 3.31061V3.18182C8.48517 2.77998 8.64481 2.39459 8.92895 2.11044C9.2131 1.8263 9.59848 1.66667 10.0003 1.66667C10.4022 1.66667 10.7876 1.8263 11.0717 2.11044C11.3558 2.39459 11.5155 2.77998 11.5155 3.18182V3.25C11.5164 3.49378 11.5887 3.73195 11.7233 3.9352C11.8579 4.13845 12.049 4.29791 12.2731 4.39394C12.5016 4.49478 12.755 4.52487 13.0008 4.48031C13.2465 4.43575 13.4733 4.31859 13.6518 4.14394L13.6973 4.09848C13.838 3.95761 14.0051 3.84586 14.1891 3.76961C14.373 3.69336 14.5702 3.65411 14.7693 3.65411C14.9684 3.65411 15.1655 3.69336 15.3495 3.76961C15.5334 3.84586 15.7005 3.95761 15.8412 4.09848C15.9821 4.2392 16.0939 4.40631 16.1701 4.59024C16.2464 4.77418 16.2856 4.97134 16.2856 5.17045C16.2856 5.36957 16.2464 5.56673 16.1701 5.75067C16.0939 5.9346 15.9821 6.10171 15.8412 6.24242L15.7958 6.28788C15.6211 6.46642 15.504 6.69319 15.4594 6.93895C15.4149 7.1847 15.4449 7.43817 15.5458 7.66667V7.72727C15.6418 7.95134 15.8013 8.14244 16.0045 8.27704C16.2078 8.41164 16.4459 8.48388 16.6897 8.48485H16.8185C17.2204 8.48485 17.6057 8.64448 17.8899 8.92863C18.174 9.21277 18.3337 9.59816 18.3337 10C18.3337 10.4018 18.174 10.7872 17.8899 11.0714C17.6057 11.3555 17.2204 11.5152 16.8185 11.5152H16.7503C16.5065 11.5161 16.2684 11.5884 16.0651 11.723C15.8619 11.8576 15.7024 12.0487 15.6064 12.2727Z" stroke="var(--Neutrals-NeutralSlate400, #A4A7AE)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
            </g>
            <defs>
                <clipPath id="clip0_914_477">
                    <rect width="20" height="20" fill="white" />
                </clipPath>
            </defs>
        </svg>
    );

    const handleNavClick = (path: string) => {
        navigate(path);
    };

    return (
        <div className="w-64 max-w-64 min-w-64 px-3 pt-4 pb-3 bg-[--Neutrals-NeutralSlate0] border-r border-[--Neutrals-NeutralSlate200] inline-flex flex-col justify-between items-center overflow-hidden">
            {/* Header Section */}
            <div className="self-stretch flex flex-col justify-start items-start gap-5">
                {/* Company Selector */}
                <div className="w-60 pl-2 pr-4 py-2 bg-[--Neutrals-NeutralSlate0] rounded-3xl outline outline-1 outline-offset-[-1px] outline-[--Neutrals-NeutralSlate200] inline-flex justify-between items-center overflow-hidden">
                    <div className="flex-1 flex justify-start items-center gap-2">
                        <div className="w-8 h-8 rounded-full flex justify-start items-center gap-2.5">
                            <div className="w-8 h-8 relative bg-[--Brand-Orange] rounded-full outline outline-[1.60px] outline-offset-[-1.60px] outline-white/10 overflow-hidden">
                                <div className="left-0 top-0 absolute">
                                    <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <rect width="32" height="32" fill="url(#paint0_linear_731_19280)" />
                                        <defs>
                                            <linearGradient id="paint0_linear_731_19280" x1="16" y1="3.97364e-07" x2="17.3333" y2="32" gradientUnits="userSpaceOnUse">
                                                <stop stopColor="white" stopOpacity="0" />
                                                <stop offset="1" stopColor="white" stopOpacity="0.12" />
                                            </linearGradient>
                                        </defs>
                                    </svg>
                                </div>
                                <div className="left-[8.80px] top-[7.20px] absolute">
                                    <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <g filter="url(#filter0_d_731_19281)">
                                            <path opacity="0.5" fillRule="evenodd" clipRule="evenodd" d="M4.34367 10.6873C4.67023 11.018 4.67022 11.5541 4.34366 11.8848L4.32693 11.9018C4.00036 12.2325 3.47089 12.2325 3.14433 11.9018C2.81777 11.5711 2.81778 11.0349 3.14434 10.7042L3.16107 10.6873C3.48764 10.3566 4.0171 10.3566 4.34367 10.6873Z" fill="url(#paint0_linear_731_19281)" />
                                            <path opacity="0.7" fillRule="evenodd" clipRule="evenodd" d="M8.2752 10.9423C8.60118 11.2736 8.60022 11.8097 8.27306 12.1398L5.95673 14.477C5.62957 14.8071 5.1001 14.8061 4.77413 14.4748C4.44815 14.1435 4.44911 13.6074 4.77627 13.2773L7.09261 10.9401C7.41976 10.61 7.94923 10.611 8.2752 10.9423Z" fill="url(#paint1_linear_731_19281)" />
                                        </g>
                                        <defs>
                                            <filter id="filter0_d_731_19281" x="0.398828" y="-0.399988" width="19.2014" height="22.4" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
                                                <feFlood floodOpacity="0" result="BackgroundImageFix" />
                                                <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
                                                <feMorphology radius="1.2" operator="erode" in="SourceAlpha" result="effect1_dropShadow_731_19281" />
                                                <feOffset dy="1.8" />
                                                <feGaussianBlur stdDeviation="1.8" />
                                                <feComposite in2="hardAlpha" operator="out" />
                                                <feColorMatrix type="matrix" values="0 0 0 0 0.141176 0 0 0 0 0.141176 0 0 0 0 0.141176 0 0 0 0.1 0" />
                                                <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_731_19281" />
                                                <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_731_19281" result="shape" />
                                            </filter>
                                            <linearGradient id="paint0_linear_731_19281" x1="3.744" y1="10.4393" x2="3.744" y2="12.1498" gradientUnits="userSpaceOnUse">
                                                <stop stopColor="white" stopOpacity="0.8" />
                                                <stop offset="1" stopColor="white" stopOpacity="0.5" />
                                            </linearGradient>
                                            <linearGradient id="paint1_linear_731_19281" x1="6.52467" y1="10.6932" x2="6.52467" y2="14.7239" gradientUnits="userSpaceOnUse">
                                                <stop stopColor="white" stopOpacity="0.8" />
                                                <stop offset="1" stopColor="white" stopOpacity="0.5" />
                                            </linearGradient>
                                        </defs>
                                    </svg>
                                </div>
                            </div>
                        </div>
                        <div className="flex-1 inline-flex flex-col justify-start items-start gap-0.5">
                            <div className="self-stretch justify-start text-[--Neutrals-NeutralSlate950] text-base font-medium font-['Inter'] leading-normal">{companyName}</div>
                        </div>
                    </div>
                    <div>
                        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M5.83301 12.5L9.99967 16.6667L14.1663 12.5M5.83301 7.50001L9.99967 3.33334L14.1663 7.50001" stroke="var(--Neutrals-NeutralSlate400, #A4A7AE)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                        </svg>
                    </div>
                </div>

                {/* Navigation Items */}
                <div className="self-stretch flex flex-col justify-start items-start gap-5">
                    <div className="self-stretch flex flex-col justify-start items-start gap-1.5">
                        {navItems.map((item, index) => (
                            <div
                                key={index}
                                onClick={() => handleNavClick(item.path)}
                                className={`w-60 px-4 py-2.5 rounded-[34px] inline-flex justify-start items-center gap-2 cursor-pointer ${item.active
                                    ? 'bg-[--Neutrals-NeutralSlate100]'
                                    : 'hover:bg-[--Neutrals-NeutralSlate50]'
                                    }`}
                            >
                                <div className="relative">
                                    {React.cloneElement(item.icon, {
                                        stroke: item.active ? "var(--Brand-Orange, #5E48FC)" : "var(--Neutrals-NeutralSlate400, #A4A7AE)"
                                    })}
                                </div>
                                <div className={`justify-start text-sm font-medium font-['Inter'] leading-tight ${item.active
                                    ? 'text-[--Neutrals-NeutralSlate950]'
                                    : 'text-[--Neutrals-NeutralSlate500]'
                                    }`}>
                                    {item.label}
                                </div>
                            </div>
                        ))}
                    </div>
                </div>
            </div>

            {/* Bottom Section */}
            <div className="self-stretch flex flex-col justify-start items-start gap-3">
                {/* Settings */}
                <div
                    onClick={() => handleNavClick("/settings")}
                    className="w-60 px-4 py-2.5 rounded-[34px] inline-flex justify-start items-center gap-2 cursor-pointer hover:bg-[--Neutrals-NeutralSlate50]"
                >
                    <div className="relative">
                        {settingsIcon}
                    </div>
                    <div className="flex-1 justify-start text-[--Neutrals-NeutralSlate500] text-sm font-medium font-['Inter'] leading-tight">Settings</div>
                </div>

                {/* Build Report Card */}
                <div className="self-stretch bg-[--Neutrals-NeutralSlate0] rounded-[20px] shadow-[0px_1px_4px_0px_rgba(14,18,27,0.04)] outline outline-1 outline-offset-[-1px] outline-[--Neutrals-NeutralSlate200] flex flex-col justify-start items-start overflow-hidden">
                    <div className="self-stretch h-24 relative">
                        <div className="self-stretch flex flex-col justify-start items-start gap-2">
                            <div className="self-stretch h-2 bg-Neutrals-NeutralSlate100 rounded-sm" />
                            <div className="w-20 h-2 bg-Neutrals-NeutralSlate100 rounded-sm" />
                        </div>
                        <div className="self-stretch flex flex-col justify-start items-start gap-1.5">
                            <div className="w-20 h-2 bg-Neutrals-NeutralSlate100 rounded-sm" />
                            <div className="self-stretch h-5 bg-Neutrals-NeutralSlate100 rounded-sm" />
                        </div>
                        <div className="self-stretch flex flex-col justify-start items-start gap-1.5">
                            <div className="w-20 h-2 bg-Neutrals-NeutralSlate100 rounded-sm" />
                            <div className="self-stretch h-5 bg-Neutrals-NeutralSlate100 rounded-sm" />
                        </div>
                    </div>
                    <div className="self-stretch p-3 flex flex-col justify-start items-start gap-1">
                        <div className="self-stretch justify-start text-[--Neutrals-NeutralSlate800] text-sm font-semibold font-['Inter'] leading-tight">Build [Company]'s Report</div>
                        <div className="self-stretch justify-start text-[--Neutrals-NeutralSlate500] text-xs font-normal font-['Inter'] leading-none">Share this form with your team members to capture valuable info about your company to train Auditly.</div>
                    </div>
                    <div className="self-stretch px-3 pb-3 flex flex-col justify-start items-start gap-8">
                        <div className="self-stretch inline-flex justify-start items-start gap-2">
                            <div className="flex-1 px-3 py-1.5 bg-Button-Secondary rounded-[999px] flex justify-center items-center gap-0.5 overflow-hidden">
                                <div className="px-1 flex justify-center items-center">
                                    <div className="justify-center text-[--Neutrals-NeutralSlate950] text-sm font-medium font-['Inter'] leading-tight">Invite</div>
                                </div>
                                <div>
                                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M7.99967 3.33333V12.6667M3.33301 8H12.6663" stroke="var(--Neutrals-NeutralSlate950, #0A0D12)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                                    </svg>
                                </div>
                            </div>
                            <div className="flex-1 px-3 py-1.5 bg-[--Brand-Orange] rounded-[999px] outline outline-1 outline-offset-[-1px] outline-blue-400 flex justify-center items-center gap-0.5 overflow-hidden">
                                <div>
                                    <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M8.97203 12.2426L8.02922 13.1854C6.72748 14.4872 4.61693 14.4872 3.31518 13.1854C2.01343 11.8837 2.01343 9.77312 3.31518 8.47138L4.25799 7.52857M12.7433 8.47138L13.6861 7.52857C14.9878 6.22682 14.9878 4.11627 13.6861 2.81452C12.3843 1.51277 10.2738 1.51277 8.97203 2.81452L8.02922 3.75733M6.16729 10.3333L10.834 5.66662" stroke="var(--Other-White, white)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                                    </svg>
                                </div>
                                <div className="px-1 flex justify-center items-center">
                                    <div className="justify-center text-white text-sm font-medium font-['Inter'] leading-tight">Copy</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
}