<script setup lang="ts">
definePageMeta({
  title: 'Dashboard',
  name: 'Dashboard',
})

const fromDate = ref(new Date(new Date().setDate(new Date().getDate() - 1)).toISOString().substr(0, 10))
const toDate = ref(new Date().toISOString().substr(0, 10))
</script>

<template>
  <div class="w-full flex justify-end">
    <input
      v-model="fromDate"
      type="date"
      class="text-black py-2 px-2 mt-5 rounded-md mb-4 w-2/4 mr-4"
    >
    <input
      v-model="toDate"
      type="date"
      class="text-black py-2 px-2 mt-5 rounded-md mb-4 w-2/4"
    >
  </div>

  <div class="w-full flex justify-start mb-4">
    <div class="w-1/4 mr-4">
      <CardButton title="Legs" icon="game-icons:hieroglyph-legs" value="120" change-value="20" />
    </div>
    <div class="w-1/4 mr-4">
      <CardButton title="Back" icon="bx:bxs-backpack" value="120" change-value="20" />
    </div>
    <div class="w-1/4 mr-4">
      <CardButton title="Chest" icon="mdi:treasure-chest" value="120" change-value="20" />
    </div>
    <div class="w-1/4 mr-4">
      <CardButton title="Shoulder" icon="game-icons:muscle-up" value="120" change-value="20" />
    </div>
  </div>

  <ExerciseChart :from-date="fromDate" :to-date="toDate" muscle="Legs" exercise="Barbell Back Squat" />
</template>

<style scoped>

</style>
