interface BarElementProps {
  className?: string;
  variant?: "asset-total" | "asset-net" | "profit-total" | "profit-net" | "income" | "debt-ratio";
  style?: React.CSSProperties;
}

export default function BarElement({ className, variant = "profit-total", style }: BarElementProps) {
  if (variant === "debt-ratio") {
    return (
      <div className={className} style={style} data-name="Property 1=柱形元素, Property 2=2-4">
        <div className="flex flex-[1_0_0] items-center justify-center mb-[-3px] min-h-px min-w-px relative shrink-0 w-full">
          <div className="flex-none rotate-[180deg] size-full">
            <div className="box-border content-stretch flex flex-col items-start pb-[3px] pt-0 px-0 relative size-full">
              <div className="box-border content-stretch flex flex-[1_0_0] items-end justify-center mb-[-3px] min-h-px min-w-px relative shrink-0 w-full">
                <div className="flex-[1_0_0] h-full min-h-px min-w-px relative shrink-0" data-name="Vector">
                  <img alt="" className="block max-w-none size-full" src="/financial-dashboard/vector.svg" />
                </div>
                <div className="bg-gradient-to-b from-[#c2e6ff] h-full shrink-0 to-[rgba(0,68,170,0.3)] w-px" />
                <div className="flex-[1_0_0] h-full min-h-px min-w-px relative shrink-0" data-name="Vector">
                  <img alt="" className="block max-w-none size-full" src="/financial-dashboard/vector1.svg" />
                </div>
              </div>
              <div className="h-[5px] mb-[-3px] relative shrink-0 w-full">
                <div className="absolute bottom-0 left-0 right-0 top-[13.33%]" data-name="Vector">
                  <img alt="" className="block max-w-none size-full" src="/financial-dashboard/vector2.svg" />
                </div>
                <div className="absolute h-[5px] left-1/2 top-[calc(50%+-0.5px)] translate-x-[-50%] translate-y-[-50%] w-px">
                  <img alt="" className="block max-w-none size-full" src="/financial-dashboard/rectangle3709.svg" />
                </div>
              </div>
            </div>
          </div>
        </div>
        <div className="flex items-center justify-center mb-[-3px] relative shrink-0 w-full">
          <div className="flex-none rotate-[180deg] w-full">
            <div className="h-[6px] relative w-full">
              <img alt="" className="block max-w-none size-full" src="/financial-dashboard/group1321314607.svg" />
            </div>
          </div>
        </div>
      </div>
    );
  }

  if (variant === "asset-net") {
    return (
      <div className={className} style={style} data-name="Property 1=柱形元素, Property 2=1-2">
        <div className="flex flex-[1_0_0] items-center justify-center mb-[-3px] min-h-px min-w-px relative shrink-0 w-full">
          <div className="flex-none rotate-[180deg] size-full">
            <div className="bg-gradient-to-b box-border content-stretch flex flex-col from-[rgba(237,206,89,0.808)] items-start pb-[3px] pt-0 px-0 relative size-full to-[rgba(237,206,89,0)]">
              <div className="h-[4px] mb-[-3px] relative shrink-0 w-full" data-name="Vector">
                <img alt="" className="block max-w-none size-full" src="/financial-dashboard/vector3.svg" />
              </div>
            </div>
          </div>
        </div>
        <div className="flex items-center justify-center mb-[-3px] relative shrink-0 w-full">
          <div className="flex-none rotate-[180deg] w-full">
            <div className="h-[6px] relative w-full">
              <img alt="" className="block max-w-none size-full" src="/financial-dashboard/frame10907.svg" />
            </div>
          </div>
        </div>
      </div>
    );
  }

  if (variant === "asset-total") {
    return (
      <div className={className} style={style} data-name="Property 1=柱形元素, Property 2=1-1">
        <div className="flex flex-[1_0_0] items-center justify-center mb-[-3px] min-h-px min-w-px relative shrink-0 w-full">
          <div className="flex-none rotate-[180deg] size-full">
            <div className="bg-gradient-to-b box-border content-stretch flex flex-col from-[rgba(162,190,255,0.808)] items-start pb-[3px] pt-0 px-0 relative size-full to-[rgba(162,190,255,0)]">
              <div className="h-[4px] mb-[-3px] relative shrink-0 w-full" data-name="Vector">
                <img alt="" className="block max-w-none size-full" src="/financial-dashboard/vector4.svg" />
              </div>
            </div>
          </div>
        </div>
        <div className="flex items-center justify-center mb-[-3px] relative shrink-0 w-full">
          <div className="flex-none rotate-[180deg] w-full">
            <div className="h-[6px] relative w-full">
              <img alt="" className="block max-w-none size-full" src="/financial-dashboard/frame10908.svg" />
            </div>
          </div>
        </div>
      </div>
    );
  }

  if (variant === "profit-net") {
    return (
      <div className={className} style={style} data-name="Property 1=柱形元素, Property 2=2-3">
        <div className="flex flex-[1_0_0] items-center justify-center mb-[-3px] min-h-px min-w-px relative shrink-0 w-full">
          <div className="flex-none rotate-[180deg] size-full">
            <div className="bg-gradient-to-b box-border content-stretch flex flex-col from-[rgba(255,173,255,0.808)] items-start pb-[3px] pt-0 px-0 relative size-full to-[rgba(255,173,255,0)]">
              <div className="h-[4px] mb-[-3px] relative shrink-0 w-full" data-name="Vector">
                <img alt="" className="block max-w-none size-full" src="/financial-dashboard/vector5.svg" />
              </div>
            </div>
          </div>
        </div>
        <div className="flex items-center justify-center mb-[-3px] relative shrink-0 w-full">
          <div className="flex-none rotate-[180deg] w-full">
            <div className="h-[6px] relative w-full">
              <img alt="" className="block max-w-none size-full" src="/financial-dashboard/rectangle3710.svg" />
            </div>
          </div>
        </div>
      </div>
    );
  }

  if (variant === "income") {
    return (
      <div className={className} style={style} data-name="Property 1=柱形元素, Property 2=1-1">
        <div className="flex flex-[1_0_0] items-center justify-center mb-[-3px] min-h-px min-w-px relative shrink-0 w-full">
          <div className="flex-none rotate-[180deg] size-full">
            <div className="bg-gradient-to-b box-border content-stretch flex flex-col from-[rgba(162,190,255,0.808)] items-start pb-[3px] pt-0 px-0 relative size-full to-[rgba(162,190,255,0)]">
              <div className="h-[4px] mb-[-3px] relative shrink-0 w-full" data-name="Vector">
                <img alt="" className="block max-w-none size-full" src="/financial-dashboard/vector4.svg" />
              </div>
            </div>
          </div>
        </div>
        <div className="flex items-center justify-center mb-[-3px] relative shrink-0 w-full">
          <div className="flex-none rotate-[180deg] w-full">
            <div className="h-[6px] relative w-full">
              <img alt="" className="block max-w-none size-full" src="/financial-dashboard/frame10908.svg" />
            </div>
          </div>
        </div>
      </div>
    );
  }

  // 默认变体 (profit-total)
  return (
    <div className={className} data-name="Property 1=柱形元素, Property 2=2-1">
      <div className="flex flex-[1_0_0] items-center justify-center mb-[-3px] min-h-px min-w-px relative shrink-0 w-full">
        <div className="flex-none rotate-[180deg] size-full">
          <div className="bg-gradient-to-b box-border content-stretch flex flex-col from-[rgba(237,206,89,0.808)] items-start pb-[3px] pt-0 px-0 relative size-full to-[rgba(237,206,89,0)]">
            <div className="h-[4px] mb-[-3px] relative shrink-0 w-full" data-name="Vector">
              <img alt="" className="block max-w-none size-full" src="/financial-dashboard/vector6.svg" />
            </div>
          </div>
        </div>
      </div>
      <div className="flex items-center justify-center mb-[-3px] relative shrink-0 w-full">
        <div className="flex-none rotate-[180deg] w-full">
          <div className="h-[6px] relative w-full">
            <img alt="" className="block max-w-none size-full" src="/financial-dashboard/group1321314608.svg" />
          </div>
        </div>
      </div>
    </div>
  );
}