<script lang="ts">
  export let body: Record<string, any>;
  export let res: any[];

  
  $: progressions = res?.length ? res.flat() : []
  </script>

<div class="text-white p-6 font-code text-xs !leading-loose grid grid-cols-1 gap-3 w-full max-w-lg">
  "{body?.inputs}"
  {#each progressions as { label, score }}
    <div>
      <div class="flex items-center justify-between mb-1">
        <p class="text-blue-500">{label}</p>
        <p class="text-green-500 text-xs">{score}</p>
      </div>
      <div class="w-full rounded-full bg-slate-800 h-[8px]">
        <div class="h-full rounded-full bg-gradient-to-r from-blue-500 to-green-500" style="width: {score * 100}%"></div>
      </div>
    </div>
  {/each}
</div>