<script lang="ts" setup>
import type { StatsData } from "~/types/Counter";

const props = defineProps<{
  websiteNumbers: StatsData;
}>();
</script>

<template>
  <div class="mx-auto max-w-[1130px] px-4">
    <div
      class="bg-gradient-default flex flex-col items-center justify-center gap-y-6 rounded-2xl px-8 py-10 md:h-[80px] md:flex-row md:justify-between md:rounded-full md:py-0"
    >
      <div class="flex flex-col items-center gap-2 md:flex-row">
        <span class="text-primary">{{ $t("status.workHours") }}</span>
        <Count
          :end-value="Number(props.websiteNumbers?.project_numbers)"
          class="min-w-[50px] text-center"
        />
      </div>
      <div class="flex flex-col items-center gap-2 md:flex-row">
        <span class="text-primary shrink-0">{{ $t("status.coffeeCups") }}</span>
        <Count
          :end-value="Number(props.websiteNumbers?.programming_code)"
          class="min-w-[90px] text-center"
        />
      </div>
      <div class="flex flex-col items-center gap-2 md:flex-row">
        <span class="text-primary">{{ $t("status.projectsExecuted") }}</span>
        <Count
          :end-value="Number(props.websiteNumbers?.number_of_problem_solved)"
          class="min-w-[70px] text-center"
        />
      </div>
    </div>
  </div>
</template>

<style scoped></style>
