import { Users, CheckCircle2, XCircle, Clock, LogOut, FileText } from "lucide-react"
import { useTranslations } from "next-intl"

import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card"

interface AttendanceStatsCardsProps {
  stats: {
    totalRecords: number
    presentCount: number
    absentCount: number
    lateCount: number
    earlyLeaveCount: number
    excusedCount: number
    attendanceRate: number
  }
}

export function AttendanceStatsCards({ stats }: AttendanceStatsCardsProps) {
  const t = useTranslations("attendance")
  const cards = [
    {
      title: t("stats.totalRecords"),
      value: stats.totalRecords,
      icon: FileText,
      color: "text-blue-500",
      bgColor: "bg-blue-500/10",
    },
    {
      title: t("stats.present"),
      value: stats.presentCount,
      icon: CheckCircle2,
      color: "text-green-500",
      bgColor: "bg-green-500/10",
    },
    {
      title: t("stats.absent"),
      value: stats.absentCount,
      icon: XCircle,
      color: "text-red-500",
      bgColor: "bg-red-500/10",
    },
    {
      title: t("stats.late"),
      value: stats.lateCount,
      icon: Clock,
      color: "text-yellow-500",
      bgColor: "bg-yellow-500/10",
    },
    {
      title: t("stats.earlyLeave"),
      value: stats.earlyLeaveCount,
      icon: LogOut,
      color: "text-orange-500",
      bgColor: "bg-orange-500/10",
    },
    {
      title: t("stats.attendanceRate"),
      value: `${stats.attendanceRate}%`,
      icon: Users,
      color: "text-primary",
      bgColor: "bg-primary/10",
    },
  ]

  return (
    <div className="grid gap-4 md:grid-cols-3 lg:grid-cols-6">
      {cards.map((card) => (
        <Card key={card.title} className="shadow-none">
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">{card.title}</CardTitle>
            <div className={`flex h-8 w-8 items-center justify-center rounded-md ${card.bgColor}`}>
              <card.icon className={`h-4 w-4 ${card.color}`} />
            </div>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold tabular-nums">{card.value}</div>
          </CardContent>
        </Card>
      ))}
    </div>
  )
}
