const AvatarFrameMain = ({width, rank, name, image, imageWidth = "100%", sx}: any) => (
<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" viewBox="-30 0 287 400" width={width} style={{...sx}}>
  <defs>
    <style>{`
      .frameclsmain-1 {
        fill: white;
      }

      .frameclsmain-2 {
        isolation: isolate;
      }

      .frameclsmain-3 {
        fill: #f6c442;
      }
        .crowncls-1 {
        fill: url(#crown-linear-gradient);
      }

      .crowncls-2 {
        fill: #fff;
      }

      .crowncls-6 {
        fill: #f9a636;
      }

      .bancls-1 {
        fill: #d89c16;
      }
      
      .bancls-3 {
        fill: #e8af2e;
      }

      .bancls-4 {
        fill: #f6c442;
      }
      `}
    </style>
    <linearGradient id="crown-linear-gradient" x1="0" y1="0" gradientUnits="objectBoundingBox">
      <stop offset="0" stop-color="#f05b2f" />
      <stop offset="0.55" stop-color="#f69023" />
      <stop offset="1" stop-color="#ffc132" />
    </linearGradient>
    <mask id="circle-mask">
      <circle cx="115" cy="190" r="104.8" fill="white" />
    </mask>
  </defs>
  <g>
    <polygon className="crowncls-6" points="177.62 52.01 141.57 61.79 115.3 32.07 89.03 61.79 52.99 52.01 70.1 105.16 115.3 90.85 160.51 105.16 177.62 52.01"/>
    <polygon className="crowncls-1" points="176.42 55.71 141.88 63.77 118.82 39.18 94.66 64.54 60.91 55.39 76.3 103.2 115.3 90.85 118.72 91.94 119.26 91.76 160.61 104.85 176.42 55.71" />
</g>
<g>
    <g>
      <path className="crowncls-6" d="M121.41,30.19c0,3.71-3.01,6.72-6.72,6.72s-6.72-3.01-6.72-6.72,3.01-6.72,6.72-6.72,6.72,3,6.72,6.72Z"/>
      <path className="crowncls-1" d="M121.35,30.8c-.31-2.75-2.61-4.89-5.44-4.89-3.03,0-5.5,2.46-5.5,5.5,0,2.83,2.14,5.13,4.89,5.44,3.22-.3,5.76-2.84,6.05-6.05Z"/>
      <path className="crowncls-2" d="M119.78,31.27c0,.96-.77,1.73-1.73,1.73s-1.73-.78-1.73-1.73.77-1.73,1.73-1.73,1.73.77,1.73,1.73Z"/>
    </g>
    <g>
      <path className="crowncls-6" d="M56.81,51.03c0,2.49-2.02,4.51-4.51,4.51s-4.51-2.02-4.51-4.51,2.02-4.51,4.51-4.51c2.49.01,4.51,2.03,4.51,4.51Z"/>
      <path className="crowncls-1" d="M56.76,51.44c-.21-1.84-1.75-3.28-3.64-3.28-2.04,0-3.68,1.65-3.68,3.69,0,1.9,1.43,3.44,3.28,3.64,2.15-.19,3.85-1.89,4.04-4.05Z"/>
      <path className="crowncls-2" d="M55.72,50.42c0,.64-.52,1.16-1.16,1.16s-1.16-.52-1.16-1.16.52-1.16,1.16-1.16,1.16.52,1.16,1.16Z"/>
    </g>
    <g>
      <path className="crowncls-6" d="M182.81,51.03c0,2.49-2.02,4.51-4.51,4.51s-4.51-2.02-4.51-4.51,2.02-4.51,4.51-4.51c2.49.01,4.51,2.03,4.51,4.51Z"/>
      <path className="crowncls-1" d="M182.77,51.44c-.21-1.84-1.75-3.28-3.64-3.28-2.04,0-3.69,1.65-3.69,3.69,0,1.9,1.44,3.44,3.28,3.64,2.15-.19,3.85-1.89,4.05-4.05Z"/>
      <path className="crowncls-2" d="M181.72,50.42c0,.64-.52,1.16-1.16,1.16s-1.16-.52-1.16-1.16.52-1.16,1.16-1.16,1.16.52,1.16,1.16Z"/>
    </g>
</g>

  <circle className="frameclsmain-3" cx="115" cy="190" r="112.14"/>
  <circle className="frameclsmain-1" cx="115" cy="190" r="104.8"/>
  <image href={image} x="-20" y="85.2" width={imageWidth} height='50%' mask="url(#circle-mask)" />
  <circle className="frameclsmain-3" cx="115" cy="95" r="35"/>
  <text 
    x="115" 
    y="92" 
    text-anchor="middle" 
    dominant-baseline="central" 
    font-size="60"
    fill="white"
    >
    {rank}
  </text>
  <g>
    <path className="bancls-3" d="M46.51,323.04s-58.64,19.55-58.64,18.58,12.18-32.69,12.18-32.69l-29.8-13.14,53.83-17.94,22.43,45.19Z"/>
    <polygon className="bancls-1" points="21.19 318.23 46.59 321.03 42.82 309.98 21.19 318.23"/>
    <path className="bancls-3" d="M178.03,321.81s58.64,19.55,58.64,18.59-12.17-32.69-12.17-32.69l29.8-13.14-53.84-17.94-22.43,45.18Z"/>
    <polygon className="bancls-1" points="203.35 317.01 177.95 321.81 181.71 308.76 203.35 317.01"/>
    <path className="bancls-4" d="M203.2,318.23c-58.82-21.18-123.19-21.18-182.01,0-6.51-18.09-13.03-36.18-19.54-54.27,71.45-25.72,149.63-25.72,221.09,0-6.51,18.09-13.02,36.18-19.54,54.27Z"/>
    <text 
    x="115" 
    y="275" 
    text-anchor="middle" 
    dominant-baseline="central" 
    font-size="40"
    fill="white"
    >
    {name}
  </text>
  </g>
</svg>
  );
  
  export default AvatarFrameMain;