<script setup lang="ts">
import AppBox from 'components/app/AppBox.vue';

const props = defineProps<{
  branch: {
    count: number;
    label: string;
  }[];
  dark?: boolean;
}>();

const color = ['pink', 'purple'];
</script>

<template>
  <div
    class="row"
    style="gap: var(--size-4)"
    :class="{ 'justify-between': $q.screen.lt.md, dark }"
  >
    <AppBox
      v-for="(v, i) in props.branch"
      :key="v.label"
      class="bordered wave col-12"
      :class="{ [`stat__${color[i % 2]}`]: true }"
      style="width: 200px; min-width: 150px; box-shadow: var(--shadow-2)"
    >
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
        <path
          class="box-path"
          d="M0,256L40,245.3C80,235,160,213,240,202.7C320,192,400,192,480,170.7C560,149,640,107,720,106.7C800,107,880,149,960,154.7C1040,160,1120,128,1200,96C1280,64,1360,32,1400,16L1440,0L1440,320L1400,320C1360,320,1280,320,1200,320C1120,320,1040,320,960,320C880,320,800,320,720,320C640,320,560,320,480,320C400,320,320,320,240,320C160,320,80,320,40,320L0,320Z"
        ></path>
      </svg>

      <div class="stat__content">
        <div class="text-h5 text-weight-bold">{{ v.count }}</div>
        <div class="text-weight-bold">{{ $t(v.label) }}</div>
      </div>
    </AppBox>
  </div>
</template>

<style scoped>
.wave {
  position: relative;
  display: flex;
}

svg {
  width: 200px;
  position: absolute;
  left: 0px;
  bottom: 0;
  opacity: 0.1;
}

.box-path {
  fill: var(--_color);
  fill-opacity: 1;
}

.stat__content {
  z-index: 2;
  color: var(--_color);
  height: 100%;
  width: 200px;
}

.stat__purple {
  --_color: var(--violet-11);
}

.stat__pink {
  --_color: var(--pink-6);
}

.dark .stat__purple {
  --_color: var(--purple-8);
}
</style>
