<script setup lang="ts">
import { Info } from 'lucide-vue-next';

defineProps<{
    stats: any;
}>();
</script>

<template>
    <div class="p-5 rounded-xl border flex flex-col justify-between bg-white dark:bg-slate-900 border-slate-200 dark:border-slate-800 shadow-sm transition-all duration-300 h-full">
        <div class="flex items-center justify-between mb-4">
            <h3 class="font-bold text-sm text-slate-800 dark:text-slate-100">{{ __('monthly_goal') }}</h3>
            <Info :size="14" class="text-slate-400" />
        </div>
        <div class="space-y-4">
            <div class="flex justify-between items-end">
                <div>
                    <!-- Dynamic Goal -->
                    <p class="text-2xl font-bold tracking-tight text-slate-900 dark:text-white">
                        {{ Math.round(stats.monthly_goal?.current || 0) }}
                        <span class="text-sm text-slate-400 font-normal"> / {{ stats.monthly_goal?.target || 160 }}h</span>
                    </p>
                    <p class="text-[10px] text-slate-500 font-bold uppercase mt-1 tracking-tighter">{{ __('hours_log_progress') }}</p>
                </div>
                <div class="text-end">
                    <p class="text-xs font-bold text-emerald-500">{{ stats.monthly_goal?.progress || 0 }}%</p>
                </div>
            </div>
            <div class="w-full h-2 bg-slate-100 dark:bg-slate-800 rounded-full overflow-hidden">
                <div class="h-full bg-[var(--brand-primary)] rounded-full transition-all duration-500" :style="{ width: `${Math.min(stats.monthly_goal?.progress || 0, 100)}%` }"></div>
            </div>
        </div>
    </div>
</template>
