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-none rotate-[180deg] size-full">
          <svg width="19" height="14" viewBox="0 0 19 14" fill="none" xmlns="http://www.w3.org/2000/svg">
            <rect width="14" height="14" transform="translate(2.09961)" fill="#297AD8"/>
            <rect width="14" height="7" transform="translate(2.09961 7)" fill="#46BDBD"/>
            <rect x="2.14961" y="7.05" width="13.9" height="1.9" stroke="white" strokeWidth="0.1"/>
            <g filter="url(#filter0_d_1977_59002)">
              <rect x="2.09961" y="7" width="14" height="2" fill="white"/>
              <rect x="2.04961" y="6.95" width="14.1" height="2.1" stroke="white" strokeWidth="0.1"/>
            </g>
            <defs>
              <filter id="filter0_d_1977_59002" x="0" y="4.90039" width="18.1992" height="6.19922" 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" operator="dilate" in="SourceAlpha" result="effect1_dropShadow_1977_59002"/>
                <feOffset/>
                <feGaussianBlur stdDeviation="0.5"/>
                <feComposite in2="hardAlpha" operator="out"/>
                <feColorMatrix type="matrix" values="0 0 0 0 0.116736 0 0 0 0 0.144867 0 0 0 0 0.170833 0 0 0 0.2 0"/>
                <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1977_59002"/>
                <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1977_59002" result="shape"/>
              </filter>
            </defs>
          </svg>
        </div>
      </div>
    );
  }

  if (variant === "asset-net") {
    return (
      <div className={className} style={style} data-name="Property 1=柱形元素, Property 2=1-2">
        <div className="flex-none rotate-[180deg] size-full">
          <svg width="15" height="11" viewBox="0 0 15 11" fill="none" xmlns="http://www.w3.org/2000/svg">
            <rect width="14" height="7.76923" transform="translate(0.25 3)" fill="url(#paint0_linear_1977_58357)"/>
            <path d="M14.25 7L0.25 7L0.25 3L14.25 3V7Z" fill="url(#paint1_linear_1977_58357)"/>
            <path d="M14.25 7L0.25 7L0.25 3L14.25 3V7Z" fill="url(#paint2_linear_1977_58357)" fillOpacity="0.8"/>
            <ellipse cx="7.25" cy="6.5" rx="7" ry="2.5" fill="url(#paint3_linear_1977_58357)"/>
            <ellipse cx="7.25" cy="6.5" rx="7" ry="2.5" fill="url(#paint4_linear_1977_58357)" fillOpacity="0.6"/>
            <path d="M14.25 6.5C14.25 7.88071 11.116 9 7.25 9C3.38401 9 0.25 7.88071 0.25 6.5" stroke="url(#paint5_linear_1977_58357)" strokeWidth="0.5"/>
            <ellipse cx="7.25" cy="2.5" rx="7" ry="2.5" fill="url(#paint6_linear_1977_58357)"/>
            <path d="M14.25 2.5C14.25 3.88071 11.116 5 7.25 5C3.38401 5 0.25 3.88071 0.25 2.5" stroke="url(#paint7_linear_1977_58357)" strokeWidth="0.5"/>
            <defs>
              <linearGradient id="paint0_linear_1977_58357" x1="7" y1="0" x2="7" y2="7.76923" gradientUnits="userSpaceOnUse">
                <stop stopColor="#EDCE59" stopOpacity="0.807843"/>
                <stop offset="1" stopColor="#EDCE59" stopOpacity="0"/>
              </linearGradient>
              <linearGradient id="paint1_linear_1977_58357" x1="7.24685" y1="6.97946" x2="7.24685" y2="3.00011" gradientUnits="userSpaceOnUse">
                <stop offset="0.177083" stopColor="#EDCE59" stopOpacity="0"/>
                <stop offset="1" stopColor="#EDCE59" stopOpacity="0.6"/>
              </linearGradient>
              <linearGradient id="paint2_linear_1977_58357" x1="0.25" y1="5" x2="14.25" y2="5" gradientUnits="userSpaceOnUse">
                <stop offset="0.1875" stopColor="#EDCE59"/>
                <stop offset="0.497375" stopColor="white"/>
                <stop offset="0.875" stopColor="#EDCE59"/>
              </linearGradient>
              <linearGradient id="paint3_linear_1977_58357" x1="7.2511" y1="8.99708" x2="7.2511" y2="4" gradientUnits="userSpaceOnUse">
                <stop stopColor="#EDCE59"/>
                <stop offset="1" stopColor="#B4910E"/>
              </linearGradient>
              <linearGradient id="paint4_linear_1977_58357" x1="0.25" y1="6.5" x2="14.25" y2="6.5" gradientUnits="userSpaceOnUse">
                <stop offset="0.1875" stopColor="#EDCE59"/>
                <stop offset="0.497375" stopColor="#FFF3C5"/>
                <stop offset="0.875" stopColor="#EDCE59"/>
              </linearGradient>
              <linearGradient id="paint5_linear_1977_58357" x1="7.25" y1="6.5" x2="7.25" y2="9" gradientUnits="userSpaceOnUse">
                <stop stopColor="#EDCE59" stopOpacity="0"/>
                <stop offset="1" stopColor="white"/>
              </linearGradient>
              <linearGradient id="paint6_linear_1977_58357" x1="7.2511" y1="4.99708" x2="7.2511" y2="0" gradientUnits="userSpaceOnUse">
                <stop stopColor="#EDCE59"/>
                <stop offset="1" stopColor="#B4910E" stopOpacity="0.807843"/>
              </linearGradient>
              <linearGradient id="paint7_linear_1977_58357" x1="7.25" y1="2.5" x2="7.25" y2="5" gradientUnits="userSpaceOnUse">
                <stop stopColor="#EDCE59" stopOpacity="0"/>
                <stop offset="1" stopColor="white"/>
              </linearGradient>
            </defs>
          </svg>
        </div>
      </div>
    );
  }

  if (variant === "asset-total") {
    return (
      <div className={className} style={style} data-name="Property 1=柱形元素, Property 2=1-1">
        <div className="flex-none rotate-[180deg] size-full">
          <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M14.25 12H0.25L0.25 3L14.25 3V12Z" fill="url(#paint0_linear_1977_58346)"/>
            <path d="M14.25 12H0.25L0.25 3L14.25 3V12Z" fill="url(#paint1_linear_1977_58346)" fillOpacity="0.6"/>
            <ellipse cx="7.25" cy="11.5" rx="7" ry="2.5" fill="url(#paint2_linear_1977_58346)"/>
            <ellipse cx="7.25" cy="11.5" rx="7" ry="2.5" fill="url(#paint3_linear_1977_58346)" fillOpacity="0.6"/>
            <path d="M14.25 11.5C14.25 12.8807 11.116 14 7.25 14C3.38401 14 0.25 12.8807 0.25 11.5" stroke="url(#paint4_linear_1977_58346)" strokeWidth="0.5"/>
            <ellipse cx="7.25" cy="2.5" rx="7" ry="2.5" fill="url(#paint5_linear_1977_58346)"/>
            <path d="M14.25 2.5C14.25 3.88071 11.116 5 7.25 5C3.38401 5 0.25 3.88071 0.25 2.5" stroke="url(#paint6_linear_1977_58346)" strokeWidth="0.5"/>
            <defs>
              <linearGradient id="paint0_linear_1977_58346" x1="7.24685" y1="11.9538" x2="7.24685" y2="3.00024" gradientUnits="userSpaceOnUse">
                <stop stopColor="#4DBBBA" stopOpacity="0"/>
                <stop offset="1" stopColor="#4DBBBA" stopOpacity="0.5"/>
              </linearGradient>
              <linearGradient id="paint1_linear_1977_58346" x1="0.25" y1="7.5" x2="14.25" y2="7.5" gradientUnits="userSpaceOnUse">
                <stop offset="0.125" stopColor="#4DBBBA"/>
                <stop offset="0.497375" stopColor="#9FFFFE"/>
                <stop offset="0.911458" stopColor="#4DBBBA"/>
              </linearGradient>
              <linearGradient id="paint2_linear_1977_58346" x1="7.2511" y1="13.9971" x2="7.2511" y2="9" gradientUnits="userSpaceOnUse">
                <stop stopColor="#4DBBBA"/>
                <stop offset="1" stopColor="#0F918F"/>
              </linearGradient>
              <linearGradient id="paint3_linear_1977_58346" x1="0.25" y1="11.5" x2="14.25" y2="11.5" gradientUnits="userSpaceOnUse">
                <stop offset="0.125" stopColor="#4DBBBA"/>
                <stop offset="0.497375" stopColor="#9FFFFE"/>
                <stop offset="0.911458" stopColor="#4DBBBA"/>
              </linearGradient>
              <linearGradient id="paint4_linear_1977_58346" x1="7.25" y1="11.5" x2="7.25" y2="14" gradientUnits="userSpaceOnUse">
                <stop stopColor="white" stopOpacity="0"/>
                <stop offset="1" stopColor="white"/>
              </linearGradient>
              <linearGradient id="paint5_linear_1977_58346" x1="7.2511" y1="4.99708" x2="7.2511" y2="0" gradientUnits="userSpaceOnUse">
                <stop stopColor="#4DBBBA"/>
                <stop offset="1" stopColor="#0F918F"/>
              </linearGradient>
              <linearGradient id="paint6_linear_1977_58346" x1="7.25" y1="2.5" x2="7.25" y2="5" gradientUnits="userSpaceOnUse">
                <stop stopColor="white" stopOpacity="0"/>
                <stop offset="1" stopColor="white"/>
              </linearGradient>
            </defs>
          </svg>
        </div>
      </div>
    );
  }

  if (variant === "profit-net") {
    return (
      <div className={className} style={style} data-name="Property 1=柱形元素, Property 2=2-3">
        <div className="flex-none rotate-[180deg] size-full">
          <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M6.5 12H0L0 3L6.5 3L6.5 12Z" fill="url(#paint0_linear_1977_58755)"/>
            <rect x="6.5" y="3" width="1" height="9" fill="url(#paint1_linear_1977_58755)"/>
            <path d="M14 12H7.5L7.5 3L14 3V12Z" fill="url(#paint2_linear_1977_58755)"/>
            <path d="M0 11.9979L7 14.0003L14 11.9979L7 9.66699L0 11.9979Z" fill="url(#paint3_linear_1977_58755)" fillOpacity="0.6"/>
            <path d="M6.5 8.5H7.5V13.5H6.5V8.5Z" fill="url(#paint4_linear_1977_58755)"/>
            <path d="M7 0L0 2.99636L7 6L14 2.99636L7 0Z" fill="url(#paint5_linear_1977_58755)"/>
            <path d="M0 3C1.19519 3.36748 2.37298 3.78174 3.55077 4.20267C4.14256 4.40312 4.72275 4.63697 5.30874 4.85746L7.06672 5.52561H6.93328L8.69126 4.85746C9.27725 4.63697 9.85744 4.40312 10.4492 4.20267C11.627 3.78174 12.8048 3.36748 14 3C12.8628 3.54788 11.7082 4.049 10.5537 4.54343C9.97928 4.79733 9.39329 5.0245 8.8131 5.25835L7.06672 5.96659L6.9971 6L6.93328 5.97327L5.1869 5.26503C4.60671 5.0245 4.02072 4.80401 3.44633 4.54343C2.29175 4.049 1.13717 3.54788 0 3Z" fill="url(#paint6_linear_1977_58755)"/>
            <defs>
              <linearGradient id="paint0_linear_1977_58755" x1="3.24854" y1="11.9804" x2="3.24854" y2="3.0003" gradientUnits="userSpaceOnUse">
                <stop stopColor="#907EFF" stopOpacity="0.2"/>
                <stop offset="1" stopColor="#7B65FF"/>
              </linearGradient>
              <linearGradient id="paint1_linear_1977_58755" x1="7" y1="3" x2="7" y2="12" gradientUnits="userSpaceOnUse">
                <stop stopColor="#DCCFFF"/>
                <stop offset="1" stopColor="#7E52FA" stopOpacity="0.3"/>
              </linearGradient>
              <linearGradient id="paint2_linear_1977_58755" x1="10.7485" y1="11.9804" x2="10.7485" y2="3.0003" gradientUnits="userSpaceOnUse">
                <stop stopColor="#826DFF" stopOpacity="0.2"/>
                <stop offset="1" stopColor="#6E3AFF"/>
              </linearGradient>
              <linearGradient id="paint3_linear_1977_58755" x1="7" y1="9.66699" x2="7" y2="14.0003" gradientUnits="userSpaceOnUse">
                <stop stopColor="#493FB5"/>
                <stop offset="1" stopColor="#7454CF"/>
              </linearGradient>
              <linearGradient id="paint4_linear_1977_58755" x1="7.5" y1="8.88462" x2="7.5" y2="13.8846" gradientUnits="userSpaceOnUse">
                <stop stopColor="#4A3C72"/>
                <stop offset="1" stopColor="#5351B8"/>
              </linearGradient>
              <linearGradient id="paint5_linear_1977_58755" x1="7.0011" y1="5.9965" x2="7.0011" y2="0" gradientUnits="userSpaceOnUse">
                <stop stopColor="#CDC7FF"/>
                <stop offset="1" stopColor="#5A25F0"/>
              </linearGradient>
              <linearGradient id="paint6_linear_1977_58755" x1="6.9982" y1="5.99719" x2="6.9982" y2="2.5" gradientUnits="userSpaceOnUse">
                <stop stopColor="white"/>
                <stop offset="1" stopColor="white" stopOpacity="0.3"/>
              </linearGradient>
            </defs>
          </svg>
        </div>
      </div>
    );
  }

  if (variant === "income") {
    return (
      <div className={className} style={style} data-name="Property 1=柱形元素, Property 2=1-1">
        <div className="flex-none rotate-[180deg] size-full">
          <svg width="15" height="25" viewBox="0 0 15 25" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M8 2H15L15 22H8L8 2Z" fill="url(#paint0_linear_1977_58555)"/>
            <rect x="8" y="22" width="1" height="20" transform="rotate(180 8 22)" fill="url(#paint1_linear_1977_58555)"/>
            <path d="M0 2H7L7 22H0L0 2Z" fill="url(#paint2_linear_1977_58555)"/>
            <path d="M15 2.0021L7.5 -0.000314236L0 2.00212L7.5 4.33301L15 2.0021Z" fill="url(#paint3_linear_1977_58555)" fillOpacity="0.6"/>
            <path d="M7.5 5.5H6.5L6.5 0.5H7.5L7.5 5.5Z" fill="url(#paint4_linear_1977_58555)"/>
            <path d="M7.5 25L15 22.0036L7.5 19L0 22.0036L7.5 25Z" fill="url(#paint5_linear_1977_58555)"/>
            <path d="M15 22C13.7194 21.6325 12.4575 21.2183 11.1956 20.7973C10.5615 20.5969 9.93991 20.363 9.31206 20.1425L7.42851 19.4744H7.57149L5.68794 20.1425C5.06009 20.363 4.43846 20.5969 3.80439 20.7973C2.54248 21.2183 1.28056 21.6325 9.53674e-07 22C1.2184 21.4521 2.45545 20.951 3.6925 20.4566C4.30792 20.2027 4.93577 19.9755 5.5574 19.7416L7.42851 19.0334L7.50311 19L7.57149 19.0267L9.4426 19.735C10.0642 19.9755 10.6921 20.196 11.3075 20.4566C12.5446 20.951 13.7816 21.4521 15 22Z" fill="url(#paint6_linear_1977_58555)"/>
            <defs>
              <linearGradient id="paint0_linear_1977_58555" x1="11.5016" y1="2.04354" x2="11.5016" y2="21.9993" gradientUnits="userSpaceOnUse">
                <stop stopColor="#FF8A00" stopOpacity="0.2"/>
                <stop offset="1" stopColor="#FFD600"/>
              </linearGradient>
              <linearGradient id="paint1_linear_1977_58555" x1="8.5" y1="22" x2="8.5" y2="42" gradientUnits="userSpaceOnUse">
                <stop stopColor="#FEFFC2"/>
                <stop offset="1" stopColor="#FF9900" stopOpacity="0.3"/>
              </linearGradient>
              <linearGradient id="paint2_linear_1977_58555" x1="3.50158" y1="2.07477" x2="3.50158" y2="21.9993" gradientUnits="userSpaceOnUse">
                <stop offset="0.00462963" stopColor="#FF8A00" stopOpacity="0.2"/>
                <stop offset="1" stopColor="#FFB800"/>
              </linearGradient>
              <linearGradient id="paint3_linear_1977_58555" x1="7.5" y1="4.33301" x2="7.5" y2="-0.000326117" gradientUnits="userSpaceOnUse">
                <stop stopColor="#58370F"/>
                <stop offset="1" stopColor="#A9600F"/>
              </linearGradient>
              <linearGradient id="paint4_linear_1977_58555" x1="6.5" y1="5.11538" x2="6.5" y2="0.115385" gradientUnits="userSpaceOnUse">
                <stop stopColor="#715120"/>
                <stop offset="1" stopColor="#8D7340" stopOpacity="0"/>
              </linearGradient>
              <linearGradient id="paint5_linear_1977_58555" x1="7.49882" y1="19.0035" x2="7.49882" y2="25" gradientUnits="userSpaceOnUse">
                <stop stopColor="#FCFF6C"/>
                <stop offset="1" stopColor="#FF8A00"/>
              </linearGradient>
              <linearGradient id="paint6_linear_1977_58555" x1="7.50193" y1="19.0028" x2="7.50193" y2="22.5" gradientUnits="userSpaceOnUse">
                <stop stopColor="white"/>
                <stop offset="1" stopColor="white" stopOpacity="0.3"/>
              </linearGradient>
            </defs>
          </svg>
        </div>
      </div>
    );
  }

  // 默认变体 (profit-total)
  return (
    <div className={className} data-name="Property 1=柱形元素, Property 2=2-1">
      <div className="flex-none rotate-[180deg] size-full">
        <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M6.5 12H0L0 3H6.5V12Z" fill="url(#paint0_linear_1977_58741)"/>
          <rect x="6.5" y="3" width="1" height="9" fill="url(#paint1_linear_1977_58741)"/>
          <path d="M14 12H7.5L7.5 3H14V12Z" fill="url(#paint2_linear_1977_58741)"/>
          <path d="M0 11.9979L7 14.0003L14 11.9979L7 9.66699L0 11.9979Z" fill="url(#paint3_linear_1977_58741)" fillOpacity="0.6"/>
          <path d="M6.5 8.5H7.5V13.5H6.5V8.5Z" fill="url(#paint4_linear_1977_58741)"/>
          <path d="M7 0L0 2.99636L7 6L14 2.99636L7 0Z" fill="url(#paint5_linear_1977_58741)"/>
          <path d="M0 3C1.19519 3.36748 2.37298 3.78174 3.55077 4.20267C4.14256 4.40312 4.72275 4.63697 5.30874 4.85746L7.06672 5.52561H6.93328L8.69126 4.85746C9.27725 4.63697 9.85744 4.40312 10.4492 4.20267C11.627 3.78174 12.8048 3.36748 14 3C12.8628 3.54788 11.7082 4.049 10.5537 4.54343C9.97928 4.79733 9.39329 5.0245 8.8131 5.25835L7.06672 5.96659L6.9971 6L6.93328 5.97327L5.1869 5.26503C4.60671 5.0245 4.02072 4.80401 3.44633 4.54343C2.29175 4.049 1.13717 3.54788 0 3Z" fill="url(#paint6_linear_1977_58741)"/>
          <defs>
            <linearGradient id="paint0_linear_1977_58741" x1="3.24854" y1="11.9538" x2="3.24854" y2="3.00024" gradientUnits="userSpaceOnUse">
              <stop stopColor="#0058FF" stopOpacity="0.2"/>
              <stop offset="1" stopColor="#0093DD"/>
            </linearGradient>
            <linearGradient id="paint1_linear_1977_58741" x1="7" y1="3" x2="7" y2="12" gradientUnits="userSpaceOnUse">
              <stop stopColor="#C2E6FF"/>
              <stop offset="1" stopColor="#0044AA" stopOpacity="0.3"/>
            </linearGradient>
            <linearGradient id="paint2_linear_1977_58741" x1="10.7485" y1="12.1126" x2="10.7485" y2="2.92332" gradientUnits="userSpaceOnUse">
              <stop offset="0.00462963" stopColor="#0138DE" stopOpacity="0.2"/>
              <stop offset="1" stopColor="#006BBC"/>
            </linearGradient>
            <linearGradient id="paint3_linear_1977_58741" x1="7" y1="9.66699" x2="7" y2="14.0003" gradientUnits="userSpaceOnUse">
              <stop stopColor="#0A316C"/>
              <stop offset="1" stopColor="#1B659B"/>
            </linearGradient>
            <linearGradient id="paint4_linear_1977_58741" x1="7.5" y1="8.88462" x2="7.5" y2="13.8846" gradientUnits="userSpaceOnUse">
              <stop stopColor="#1F3453"/>
              <stop offset="1" stopColor="#40558D" stopOpacity="0"/>
            </linearGradient>
            <linearGradient id="paint5_linear_1977_58741" x1="7.0011" y1="5.9965" x2="7.0011" y2="0" gradientUnits="userSpaceOnUse">
              <stop stopColor="#81E4FF"/>
              <stop offset="1" stopColor="#0072DD"/>
            </linearGradient>
            <linearGradient id="paint6_linear_1977_58741" x1="6.9982" y1="5.99719" x2="6.9982" y2="2.5" gradientUnits="userSpaceOnUse">
              <stop stopColor="white"/>
              <stop offset="1" stopColor="white" stopOpacity="0.3"/>
            </linearGradient>
          </defs>
        </svg>
      </div>
    </div>
  );
}