<template>
  <article class="analysis-stat-card" :class="[`tone-${tone}`]">
    <h3>{{ title }}</h3>
    <p>
      <span class="value">{{ value }}</span>
      <span class="unit">{{ unit }}</span>
    </p>
  </article>
</template>

<script setup lang="ts">
withDefaults(
  defineProps<{
    title: string;
    value: string | number;
    unit: string;
    tone?: "red" | "orange" | "yellow" | "green" | "blue";
  }>(),
  {
    tone: "blue",
  },
);
</script>

<style scoped lang="scss">
.analysis-stat-card {
  position: relative;
  width: 554px;
height: 218px;
  border: 1px solid rgba(221, 234, 241, 0.9);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 28px 30px 24px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(239, 250, 255, 0.86), rgba(252, 254, 255, 0.96));

  &::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(132deg, transparent 0 48%, rgba(255, 255, 255, 0.38) 49%, transparent 58%),
      linear-gradient(132deg, transparent 0 68%, rgba(255, 255, 255, 0.25) 69%, transparent 78%);
    pointer-events: none;
  }

  h3,
  p {
    position: relative;
    z-index: 1;
  }

  h3 {
    color: #111;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
  }

  p {
    text-align: center;
    line-height: 1;
  }

  .value {
    color: #2d8ed6;
    font-size: 40px;
    font-weight: 700;
  }

  .unit {
    margin-left: 7px;
    color: #111;
    font-size: 28px;
    font-weight: 500;
  }
}

.tone-red {
  background: linear-gradient(180deg, rgba(255, 242, 245, 0.9), rgba(255, 253, 253, 0.96));

  .value {
    color: #d8222a;
  }
}

.tone-orange {
  background: linear-gradient(180deg, rgba(255, 248, 241, 0.9), rgba(255, 253, 250, 0.96));

  .value {
    color: #f07b2d;
  }
}

.tone-yellow {
  background: linear-gradient(180deg, rgba(255, 253, 235, 0.92), rgba(255, 255, 250, 0.96));

  .value {
    color: #d8b20e;
  }
}

.tone-green {
  background: linear-gradient(180deg, rgba(235, 255, 249, 0.92), rgba(250, 255, 253, 0.96));

  .value {
    color: #30c590;
  }
}
</style>
