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="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 inset-[31.17%_39.47%] items-center justify-center">
          <div className="flex-none h-[17.684px] rotate-[270deg] w-[31.641px]">
            <div className="relative size-full" data-name="路径">
              <div className="absolute inset-[-50.89%_-28.44%]">
                <img
                  alt=""
                  className="block max-w-none size-full"
                  src="/financial-dashboard/icon-path.svg"
                />
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}