<script setup lang="ts">
import { CheckCircle2, Clock, Timer, AlertCircle } from 'lucide-vue-next';

defineProps<{
    stats: {
        attendance_rate: number;
        avg_check_in: string;
        total_overtime: number;
        late_count: number;
    };
}>();

</script>

<template>
    <div class="grid grid-cols-2 lg:grid-cols-4 gap-4">
        <div class="p-4 rounded-xl border bg-white dark:bg-slate-900 border-slate-200 dark:border-slate-800 shadow-sm transition-all duration-300">
            <div class="flex items-center justify-between mb-2">
                <span class="text-slate-500 font-bold text-[10px] uppercase tracking-widest">{{ __('attendance_rate') }}</span>
                <span class="text-emerald-600 dark:text-emerald-500 opacity-80"><CheckCircle2 :size="16"/></span>
            </div>
            <div class="flex items-end justify-between">
                <h4 class="text-lg font-bold tracking-tight text-slate-900 dark:text-white">{{ stats.attendance_rate }}%</h4>
            </div>
        </div>

        <div class="p-4 rounded-xl border bg-white dark:bg-slate-900 border-slate-200 dark:border-slate-800 shadow-sm transition-all duration-300">
            <div class="flex items-center justify-between mb-2">
                <span class="text-slate-500 font-bold text-[10px] uppercase tracking-widest">{{ __('avg_log_in') }}</span>
                <span class="text-blue-600 dark:text-blue-500 opacity-80"><Clock :size="16"/></span>
            </div>
            <div class="flex items-end justify-between">
                <h4 class="text-lg font-bold tracking-tight text-slate-900 dark:text-white">{{ stats.avg_check_in }}</h4>
                <span class="text-[10px] font-bold text-slate-400">{{ __('on_time') }}</span>
            </div>
        </div>

        <div class="p-4 rounded-xl border bg-white dark:bg-slate-900 border-slate-200 dark:border-slate-800 shadow-sm transition-all duration-300">
            <div class="flex items-center justify-between mb-2">
                <span class="text-slate-500 font-bold text-[10px] uppercase tracking-widest">{{ __('total_ot') }}</span>
                <span class="text-amber-600 dark:text-amber-500 opacity-80"><Timer :size="16"/></span>
            </div>
            <div class="flex items-end justify-between">
                <h4 class="text-lg font-bold tracking-tight text-slate-900 dark:text-white">{{ stats.total_overtime }}h</h4>
                <span class="text-[10px] font-bold text-slate-400">{{ __('this_month') }}</span>
            </div>
        </div>

        <div class="p-4 rounded-xl border bg-white dark:bg-slate-900 border-slate-200 dark:border-slate-800 shadow-sm transition-all duration-300">
            <div class="flex items-center justify-between mb-2">
                <span class="text-slate-500 font-bold text-[10px] uppercase tracking-widest">{{ __('late_counts') }}</span>
                <span class="text-rose-600 dark:text-rose-500 opacity-80"><AlertCircle :size="16"/></span>
            </div>
            <div class="flex items-end justify-between">
                <h4 class="text-lg font-bold tracking-tight text-slate-900 dark:text-white">{{ String(stats.late_count).padStart(2, '0') }}</h4>
                <span class="text-[10px] font-bold text-rose-500 flex items-center gap-1">{{ __('warning_at_05') }}</span>
            </div>
        </div>
    </div>
</template>
