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

      .framecls-2 {
        isolation: isolate;
      }

      .framecls-3 {
        fill: ${theme.palette.primary.dark};
      }
        .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="framecls-3" cx="115" cy="190" r="112.14"/>
  <circle className="framecls-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="framecls-3" cx="115" cy="90" r="30"/>
  <text 
    x="115" 
    y="87" 
    text-anchor="middle" 
    dominant-baseline="central" 
    font-size="50"
    fill="white"
    >
    {rank}
  </text>
  <g>
  <rect className="framecls-3" x="-7" y="270" width="250" height="50" rx="10" ry="10" />
    <text 
    x="120" 
    y="295" 
    text-anchor="middle" 
    dominant-baseline="central" 
    font-size="25"
    fill="white"
    >
    {name}
  </text>
  </g>
</svg>
  );
  
  export default AvatarFrame;