interface IconProps {
  className?: string;
  /** 图标类型：'back' - 返回按钮，'float' - 浮动按钮 */
  variant?: 'back' | 'float';
}

export default function Icon({ className, variant = 'back' }: IconProps) {
  return (
    <div className={className} data-name={variant === 'float' ? '浮动icon' : '返回icon'}>
      {variant === 'float' ? (
        // 浮动按钮样式 - 包含图标和文字
        <div className="relative size-full">
          {/* 浮动按钮图标 */}
          <div className="absolute aspect-[84/84] bottom-[2.38%] flex items-center justify-center left-1/2 top-[2.38%] translate-x-[-50%]">
            <div className="flex-none rotate-[180deg] scale-y-[-100%] size-[108px]">
              <div className="relative size-full">
                <div className="absolute inset-[-1.25%]">
                  <img
                    alt=""
                    className="block max-w-none size-full"
                    src="/financial-dashboard/ellipse4119.svg"
                  />
                </div>
              </div>
            </div>
          </div>
          {/* 浮动按钮文字 */}
          <div className="absolute flex flex-col items-center left-1/2 top-[calc(100%+-82px)] translate-x-[-50%]">
            <div className="font-['PingFang_SC:Medium',sans-serif] h-[51px] leading-[normal] not-italic text-[20px] text-center text-white tracking-[0.6349px] w-[55px] whitespace-pre-wrap">
              <p className="mb-0">变动</p>
              <p>幅度</p>
            </div>
          </div>
        </div>
      ) : (
        // 返回按钮样式 - 包含外圈和向左箭头
        <div className="relative size-full">
          {/* 外圈背景 */}
          <div className="absolute aspect-[84/84] bottom-[2.38%] flex items-center justify-center left-1/2 top-[2.38%] translate-x-[-50%]">
            <div className="flex-none rotate-[180deg] scale-y-[-100%] size-[80px]">
              <div className="relative size-full">
                <div className="absolute inset-[-1.17%]">
                  <img
                    alt=""
                    className="block max-w-none size-full"
                    src="/financial-dashboard/return-icon-bg.svg"
                  />
                </div>
              </div>
            </div>
          </div>
          {/* 向左箭头 SVG */}
          <div className="absolute flex inset-[31.17%_39.47%] items-center justify-center">
            <svg width="37" height="52" viewBox="0 0 37 52" fill="none" xmlns="http://www.w3.org/2000/svg">
              <g filter="url(#filter0_d_1977_82237)">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M24.9389 42.8996C25.2582 42.9109 25.5689 42.7951 25.8025 42.5778L27.5649 40.9398C27.7984 40.7223 27.9357 40.4212 27.9466 40.1027C27.9574 39.7842 27.8409 39.4745 27.6227 39.2418L15.199 25.9506L27.6227 12.6571C28.0755 12.1727 28.0496 11.4141 27.5649 10.9615L25.8025 9.32348C25.5692 9.10584 25.2587 8.9896 24.9394 9.00041C24.6201 9.01123 24.3183 9.14819 24.1003 9.38111L10.1959 24.255L9.38209 25.0116C9.12173 25.2537 8.98239 25.5985 9.00166 25.953C8.98385 26.3059 9.12306 26.6487 9.38209 26.8897L10.2007 27.6462L24.1003 42.5177C24.3179 42.751 24.6196 42.8884 24.9389 42.8996Z" fill="#C9DDFF"/>
              </g>
              <defs>
                <filter id="filter0_d_1977_82237" x="0" y="0" width="36.9473" height="51.9004" 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"/>
                  <feOffset/>
                  <feGaussianBlur stdDeviation="4.5"/>
                  <feColorMatrix type="matrix" values="0 0 0 0 0.788235 0 0 0 0 0.866667 0 0 0 0 1 0 0 0 0.501961 0"/>
                  <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1977_82237"/>
                  <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1977_82237" result="shape"/>
                </filter>
              </defs>
            </svg>
          </div>
        </div>
      )}
    </div>
  );
}