<script lang = 'ts'>

  import {getImageURL} from '$lib/utils';
  
  import { goto} from '$app/navigation';
  
  export let data;
  export let rank;
  
  
  </script>
  
  
  
  <section class=" {rank === 1 ? 'h-48 sm:h-60 mr-2 sm:mr-10 light-box-1' : rank === 2 ? 'h-40 sm:h-48 ml-2 mr-2 sm:mr-10 light-box-2' : 'h-36 sm:h-40 mr-2 light-box-3'} w-full sm:w-48 border border-slate-600 hover:ring-[1px] hover:ring-purple-600 ease-in-out delay-50 bg-gray-400 rounded-[25px] sm:rounded-xl bg-opacity-[0.3]  mt-auto relative">
      {#if rank ===1}
          <svg class="w-9 h-9 sm:w-12 sm:h-12 absolute -top-1 right-0" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve" fill="#ffffff"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <polygon style="fill:#4675CF;" points="186.205,408.076 90.454,503.826 66.108,437.718 0,413.372 82.217,331.155 122.966,290.406 211.543,378.982 "></polygon> <polygon style="fill:#4675CF;" points="405.487,306.86 512,413.372 445.891,437.718 421.545,503.826 298.975,381.256 "></polygon> </g> <g> <polygon style="fill:#4E8FE3;" points="146.568,314.077 34.53,426.115 66.038,437.718 78.385,471.244 191.06,358.569 "></polygon> <polygon style="fill:#4E8FE3;" points="477.501,426.233 377.778,326.51 325.388,363.103 433.85,471.566 446.315,437.718 "></polygon> </g> <g> <path style="opacity:0.23;fill:#3F489B;enable-background:new ;" d="M405.487,306.876l-106.513,74.395l45.268,45.268 c40.657-16.832,75.604-44.65,101.152-79.756L405.487,306.876z"></path> <path style="opacity:0.23;fill:#3F489B;enable-background:new ;" d="M82.217,331.171l-18.325,18.325 c26.069,34.779,61.476,62.152,102.502,78.406l19.81-19.81l25.338-29.094l-88.577-88.577L82.217,331.171z"></path> </g> <path style="fill:#CCA400;" d="M275.43,11.923L275.43,11.923c27.832-9.859,58.816,0.208,75.536,24.544l0,0 c8.465,12.321,20.907,21.36,35.241,25.604l0,0c28.312,8.382,47.461,34.738,46.684,64.255l0,0 c-0.393,14.943,4.359,29.569,13.461,41.428l0,0c17.978,23.422,17.978,56.002,0,79.424l0,0 c-9.102,11.858-13.854,26.484-13.461,41.428l0,0c0.777,29.517-18.372,55.873-46.684,64.255l0,0 c-14.334,4.244-26.775,13.283-35.241,25.604l0,0c-16.721,24.336-47.705,34.403-75.536,24.544l0,0 c-14.091-4.992-29.469-4.992-43.56,0l0,0c-27.832,9.859-58.816-0.208-75.536-24.544l0,0c-8.466-12.321-20.907-21.36-35.241-25.604 l0,0c-28.312-8.382-47.461-34.738-46.684-64.255l0,0c0.393-14.943-4.359-29.569-13.461-41.428l0,0 c-17.978-23.422-17.978-56.002,0-79.424l0,0c9.102-11.858,13.854-26.484,13.461-41.428l0,0 c-0.777-29.517,18.372-55.873,46.684-64.255l0,0c14.334-4.244,26.775-13.283,35.241-25.604l0,0 c16.721-24.336,47.705-34.403,75.536-24.544l0,0C245.961,16.915,261.339,16.915,275.43,11.923z"></path> <circle style="fill:#EEBF00;" cx="253.646" cy="207.466" r="154.651"></circle> <polygon style="fill:#FFEB99;" points="237.07,141.954 212.717,141.954 212.717,179.386 237.07,179.386 237.07,283.564 274.502,283.564 274.502,179.386 274.502,141.954 "></polygon> <g> <path style="fill:#CCA400;" d="M188.354,234.018c17.682,17.682,14.244,49.786,14.244,49.786s-32.105,3.437-49.786-14.244 c-17.682-17.682-14.244-49.786-14.244-49.786S170.673,216.336,188.354,234.018z"></path> <path style="fill:#CCA400;" d="M355.151,269.559c-17.682,17.682-49.786,14.244-49.786,14.244s-3.437-32.105,14.244-49.786 s49.786-14.244,49.786-14.244S372.833,251.878,355.151,269.559z"></path> </g> <path style="opacity:0.14;fill:#56361D;enable-background:new ;" d="M446.424,167.754L446.424,167.754 c-9.102-11.858-13.854-26.484-13.461-41.428l0,0c0.777-29.517-18.372-55.873-46.684-64.255l0,0 c-13.093-3.876-24.595-11.763-32.942-22.486c19.976,31.429,31.553,68.72,31.553,108.717c0,112.091-90.868,202.957-202.957,202.957 c-34.771,0-67.497-8.75-96.104-24.16c8.255,12.085,20.54,21.38,35.336,25.762l0,0c14.334,4.244,26.775,13.283,35.241,25.604l0,0 c16.721,24.336,47.705,34.403,75.536,24.544l0,0c14.091-4.991,29.469-4.991,43.56,0l0,0c27.832,9.859,58.816-0.208,75.536-24.544 l0,0c8.465-12.321,20.907-21.36,35.241-25.604l0,0c28.312-8.382,47.461-34.739,46.684-64.255l0,0 c-0.393-14.943,4.359-29.569,13.461-41.428l0,0C464.401,223.754,464.401,191.176,446.424,167.754z"></path> </g></svg>
      {:else if rank === 2}
          <svg class="w-9 h-9 sm:w-12 sm:h-12 absolute -top-1 right-0" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve" fill="#A87429" stroke="#A87429"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <polygon style="fill:#4675CF;" points="189.93,385.281 189.93,512 256.001,481.496 322.071,512 322.071,388.673 "></polygon> <polygon style="fill:#4E8FE3;" points="221.58,386.094 221.58,497.388 256.001,481.496 290.42,497.388 290.42,387.86 "></polygon> <path style="opacity:0.22;fill:#3F489B;enable-background:new ;" d="M189.93,434.134c19.725,7.879,41.246,12.22,63.785,12.22 c24.292,0,47.403-5.045,68.356-14.127v-43.552l-132.141-3.391V434.134z"></path> <path style="fill:#ACAAB1;" d="M278.498,3.874L278.498,3.874c28.749-10.185,60.756,0.215,78.028,25.353l0,0 c8.745,12.728,21.597,22.064,36.403,26.449l0,0c29.246,8.659,49.026,35.884,48.224,66.374l0,0 c-0.406,15.436,4.503,30.544,13.905,42.795l0,0c18.571,24.195,18.571,57.849,0,82.043l0,0 c-9.403,12.249-14.311,27.357-13.905,42.795l0,0c0.802,30.49-18.978,57.716-48.224,66.374l0,0 c-14.807,4.384-27.658,13.721-36.403,26.449l0,0c-17.273,25.139-49.278,35.538-78.028,25.353l0,0 c-14.555-5.157-30.441-5.157-44.997,0l0,0c-28.749,10.185-60.756-0.215-78.028-25.353l0,0 c-8.745-12.728-21.597-22.064-36.403-26.449l0,0c-29.246-8.659-49.026-35.884-48.224-66.374l0,0 c0.406-15.436-4.503-30.544-13.905-42.795l0,0c-18.571-24.195-18.571-57.849,0-82.043l0,0c9.403-12.249,14.311-27.357,13.905-42.795 l0,0c-0.802-30.49,18.978-57.716,48.224-66.374l0,0c14.807-4.384,27.658-13.721,36.403-26.449l0,0 c17.273-25.14,49.278-35.539,78.028-25.353l0,0C248.057,9.03,263.943,9.03,278.498,3.874z"></path> <circle style="fill:#D7D5D9;" cx="255.997" cy="205.861" r="159.751"></circle> <path style="fill:#C59F3A;" d="M297.495,160.142c0-12.123-9.828-21.949-21.949-21.949h-16.717h-48.895v38.666h38.574 c4.904,0,8.227,4.995,6.331,9.518l-41.116,98.095h32.702h5.965h22.553h22.552v-38.666h-22.552h-6.346l25.735-61.399 c2.088-4.983,3.164-10.331,3.164-15.733V160.142z"></path> <g> <path style="fill:#ACAAB1;" d="M339.764,299.886c-2.039,0-4.08-0.778-5.636-2.335c-3.113-3.113-3.113-8.159,0-11.271 c44.342-44.341,44.342-116.489,0-160.83c-3.113-3.113-3.113-8.159,0-11.271c3.114-3.113,8.159-3.113,11.272,0 c24.49,24.49,37.977,57.052,37.977,91.686s-13.486,67.196-37.977,91.686C343.844,299.108,341.804,299.886,339.764,299.886z"></path> <path style="fill:#ACAAB1;" d="M167.664,299.886c-2.039,0-4.08-0.778-5.635-2.335c-24.49-24.49-37.978-57.052-37.978-91.686 s13.487-67.196,37.978-91.686c3.113-3.113,8.159-3.113,11.271,0c3.113,3.113,3.113,8.159,0,11.271 c-44.341,44.341-44.341,116.489,0,160.83c3.113,3.113,3.113,8.159,0,11.271C171.744,299.108,169.703,299.886,167.664,299.886z"></path> </g> <path style="opacity:0.14;fill:#56361D;enable-background:new ;" d="M454.826,164.844L454.826,164.844 c-9.402-12.249-14.311-27.357-13.905-42.795l0,0c0.802-30.49-18.978-57.716-48.224-66.374l0,0 c-13.525-4.004-25.406-12.151-34.029-23.228c20.635,32.466,32.594,70.986,32.594,112.303c0,115.788-93.865,209.651-209.651,209.651 c-35.918,0-69.723-9.039-99.274-24.957c8.527,12.483,21.217,22.085,36.502,26.611l0,0c14.807,4.384,27.658,13.721,36.403,26.449l0,0 c17.273,25.139,49.278,35.538,78.028,25.353l0,0c14.555-5.156,30.441-5.156,44.997,0l0,0c28.749,10.185,60.756-0.215,78.028-25.353 l0,0c8.745-12.728,21.597-22.064,36.403-26.449l0,0c29.246-8.659,49.026-35.884,48.224-66.374l0,0 c-0.406-15.436,4.503-30.544,13.905-42.795l0,0C473.396,222.691,473.396,189.039,454.826,164.844z"></path> </g></svg>
      {:else if rank === 3}
          <svg class="w-9 h-9 sm:w-12 sm:h-12 absolute -top-1 right-0"  version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve" fill="#ffffff"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <polygon style="fill:#4675CF;" points="189.249,385.281 189.249,512 255.319,481.496 321.39,512 321.39,381.076 "></polygon> <g> <polygon style="fill:#4E8FE3;" points="220.895,386.094 220.895,497.388 255.316,481.496 289.737,497.388 289.737,387.86 "></polygon> <polygon style="fill:#4E8FE3;" points="220.895,386.094 220.895,497.388 255.316,481.496 289.737,497.388 289.737,387.86 "></polygon> </g> <path style="opacity:0.22;fill:#3F489B;enable-background:new ;" d="M189.249,438.754c19.725,7.879,41.246,12.22,63.785,12.22 c24.292,0,47.403-5.045,68.356-14.127v-43.552l-132.141-3.391L189.249,438.754L189.249,438.754z"></path> <path style="fill:#A87429;" d="M277.817,3.874L277.817,3.874c28.749-10.185,60.756,0.215,78.028,25.353l0,0 c8.745,12.728,21.597,22.064,36.403,26.449l0,0c29.246,8.659,49.026,35.884,48.224,66.374l0,0 c-0.406,15.436,4.503,30.544,13.905,42.795l0,0c18.571,24.195,18.571,57.849,0,82.043l0,0 c-9.402,12.249-14.311,27.357-13.905,42.795l0,0c0.802,30.49-18.978,57.716-48.224,66.374l0,0 c-14.807,4.384-27.658,13.721-36.403,26.449l0,0c-17.273,25.139-49.278,35.538-78.028,25.353l0,0 c-14.555-5.157-30.441-5.157-44.997,0l0,0c-28.749,10.185-60.756-0.215-78.028-25.353l0,0 c-8.745-12.728-21.597-22.064-36.403-26.449l0,0c-29.246-8.659-49.026-35.884-48.224-66.374l0,0 c0.406-15.436-4.503-30.544-13.905-42.795l0,0c-18.571-24.195-18.571-57.849,0-82.043l0,0c9.403-12.249,14.311-27.357,13.905-42.795 l0,0c-0.802-30.49,18.978-57.716,48.224-66.374l0,0c14.807-4.384,27.658-13.721,36.403-26.449l0,0 c17.273-25.14,49.278-35.539,78.028-25.353l0,0C247.376,9.03,263.262,9.03,277.817,3.874z"></path> <circle style="fill:#E8A554;" cx="255.317" cy="205.861" r="159.751"></circle> <g> <polygon style="fill:#A87429;" points="228.117,198.209 228.117,224.456 247.347,224.456 247.347,245.806 215.715,245.806 215.715,284.474 247.347,284.474 280.014,284.474 286.014,284.474 286.014,176.859 286.014,138.193 247.347,138.193 213.497,138.193 213.497,176.859 247.347,176.859 247.347,198.209 "></polygon> <path style="fill:#A87429;" d="M341.366,299.886c-2.039,0-4.08-0.778-5.636-2.335c-3.113-3.113-3.113-8.159,0-11.271 c44.342-44.341,44.342-116.489,0-160.83c-3.113-3.113-3.113-8.159,0-11.271c3.114-3.113,8.159-3.113,11.272,0 c24.49,24.49,37.977,57.052,37.977,91.686s-13.486,67.196-37.977,91.686C345.446,299.108,343.405,299.886,341.366,299.886z"></path> <path style="fill:#A87429;" d="M169.265,299.886c-2.039,0-4.08-0.778-5.636-2.335c-24.49-24.49-37.977-57.052-37.977-91.686 s13.486-67.196,37.977-91.686c3.114-3.113,8.159-3.113,11.272,0s3.113,8.159,0,11.271c-44.342,44.341-44.342,116.489,0,160.83 c3.113,3.113,3.113,8.159,0,11.271C173.345,299.108,171.305,299.886,169.265,299.886z"></path> </g> <path style="opacity:0.14;fill:#56361D;enable-background:new ;" d="M455.739,164.844L455.739,164.844 c-9.402-12.249-14.311-27.357-13.905-42.795l0,0c0.802-30.49-18.978-57.716-48.224-66.374l0,0 c-13.525-4.004-25.406-12.151-34.029-23.228c20.635,32.466,32.594,70.986,32.594,112.303c0,115.788-93.865,209.651-209.651,209.651 c-35.918,0-69.723-9.039-99.274-24.957c8.527,12.483,21.217,22.085,36.502,26.611l0,0c14.807,4.384,27.658,13.721,36.403,26.449l0,0 c17.273,25.139,49.278,35.538,78.028,25.353l0,0c14.555-5.156,30.441-5.156,44.997,0l0,0c28.749,10.185,60.756-0.215,78.028-25.353 l0,0c8.745-12.728,21.597-22.064,36.403-26.449l0,0c29.246-8.659,49.026-35.884,48.224-66.374l0,0 c-0.406-15.436,4.503-30.544,13.905-42.795l0,0C474.31,222.691,474.31,189.039,455.739,164.844z"></path> </g></svg>
      {/if}
      <label on:click={() => goto("/community/user/"+data?.user)} class="cursor-pointer">
          <div class="flex flex-col items-center mb-3 ">
              <span class="text-white  mt-3 {rank === 1 ? 'text-xs sm:text-xl' : rank === 2 ? 'text-xs sm:text-md' : 'text-xs sm:text-md'} ">
                  {data?.expand?.user?.username}
              </span>
          </div>
  
          <div class="rounded-full m-auto {rank === 1 ? 'h-20 w-20' : rank === 2 ? 'h-16 w-16' : 'w-12 h-12'} relative">
              <img style="clip-path: circle(50%);"
                class="rounded-full {rank === 1 ? 'w-16 h-16 sm:w-20 sm:h-20' : rank === 2 ? 'w-14 h-14 sm:w-16 sm:h-16' : 'w-11 h-11 sm:w-12 sm:h-12'}  absolute inset-1/2 transform -translate-x-1/2 -translate-y-1/2" 
                src={data?.expand?.user?.avatar
                    ? getImageURL(data?.expand?.user?.collectionId, data?.expand?.user?.id, data?.expand?.user?.avatar)
                    : `https://avatar.vercel.sh/${data?.expand?.user?.username}`} 
                alt="User avatar" loading="lazy"/>
                
          </div>

      </label>
  
    <div class="flex flex-col items-center {rank === 1 ? 'text-xs sm:text-sm mt-6 sm:mt-10' : rank === 2 ? 'mt-2 sm:mt-6 text-xs' : 'mt-2.5 text-xs'}">
  
      ${new Intl.NumberFormat("en", {
        minimumFractionDigits: 2,
        maximumFractionDigits: 2
    }).format(data?.accountValue)}
  
      <div class="flex flex-row items-center mt-1">
  
        {#if data?.overallReturn > 0}
        <svg class="w-5 h-5 -mr-0.5 mt-0.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g id="evaArrowUpFill0"><g id="evaArrowUpFill1"><path id="evaArrowUpFill2" fill="#37C97D" d="M16.21 16H7.79a1.76 1.76 0 0 1-1.59-1a2.1 2.1 0 0 1 .26-2.21l4.21-5.1a1.76 1.76 0 0 1 2.66 0l4.21 5.1A2.1 2.1 0 0 1 17.8 15a1.76 1.76 0 0 1-1.59 1Z"/></g></g></svg>
  
          <span class="text-[#37C97D] text-md">
            +{data?.overallReturn.toFixed(2)}%
          </span>
        {:else if data?.overallReturn < 0}
        <svg class="w-5 h-5 -mr-0.5 mt-0.5 rotate-180" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g id="evaArrowUpFill0"><g id="evaArrowUpFill1"><path id="evaArrowUpFill2" fill="#FF2F1F" d="M16.21 16H7.79a1.76 1.76 0 0 1-1.59-1a2.1 2.1 0 0 1 .26-2.21l4.21-5.1a1.76 1.76 0 0 1 2.66 0l4.21 5.1A2.1 2.1 0 0 1 17.8 15a1.76 1.76 0 0 1-1.59 1Z"/></g></g></svg>    
          <span class="text-[#FF2F1F] text-md">
            {data?.overallReturn?.toFixed(2)}%
          </span>
        {:else}
          <svg class="w-2.5 h-2.5 inline-block mr-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g><path fill="#fff" d="M3 19h18a1.002 1.002 0 0 0 .823-1.569l-9-13c-.373-.539-1.271-.539-1.645 0l-9 13A.999.999 0 0 0 3 19z"/></g></svg>
          <span class="text-white text-md">
            {data?.overallReturn.toFixed(2)}%
          </span>
        {/if}
  
      </div>

  
    </div>
        
  </section>


<style lang='scss'>


.light-box-1 {
        --border-size: 2px;
        --border-angle: 0turn;
        background-image: conic-gradient(from var(--border-angle), #213, #112 50%, #213), conic-gradient(from var(--border-angle), transparent 20%, #08f, #f03);
        background-size: calc(100% - (var(--border-size) * 2)) calc(100% - (var(--border-size) * 2)), cover;
        background-position: center center;
        background-repeat: no-repeat;
      animation: bg-spin 3s linear infinite;
      @keyframes bg-spin {
        to {
          --border-angle: 1turn;
        }
      }
    }

    @property --border-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0turn;
}

    
    
    .light-box-2 {
        --border-size: 1px;
        --border-angle: 0turn;
        background-image: conic-gradient(from var(--border-angle), #213, #112 50%, #213), conic-gradient(from var(--border-angle), transparent 20%, #08f, #f03);
        background-position: center center;
        background-repeat: no-repeat;
    }
    
    
    .light-box-3 {
        --border-size: 1px;
        --border-angle: 0turn;
        background-image: conic-gradient(from var(--border-angle), #213, #112 50%, #213), conic-gradient(from var(--border-angle), transparent 20%, #08f, #f03);
        background-position: center center;
        background-repeat: no-repeat;
    }
    
    
    </style>