<script setup lang="ts">
import DayOverviewCardChart from '@/Components/Dashboard/DayOverviewCardChart.vue';

defineProps<{
    date: string;
    duration: number;
    history: number[];
}>();
import {
    formatHumanReadableDate,
    formatHumanReadableDuration,
} from '@/packages/ui/src/utils/time';
</script>

<template>
    <div
        class="px-3.5 py-2 flex justify-between @container border-b border-card-background-separator">
        <div class="flex items-center min-w-[70px]">
            <p class="font-semibold text-sm text-white">
                {{ formatHumanReadableDate(date) }}
            </p>
        </div>
        <div class="items-center justify-center flex-1 hidden @2xs:flex">
            <DayOverviewCardChart :history="history"></DayOverviewCardChart>
        </div>
        <div
            class="flex text-sm items-center justify-center text-muted min-w-[65px] font-semibold">
            {{ formatHumanReadableDuration(duration) }}
        </div>
    </div>
</template>
