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

import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card"
import { cn } from "@/shared/lib/utils"
import type { AttendanceStats } from "../types"

interface AttendanceStatsCardsProps {
  stats: AttendanceStats
}

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

  return (
    <div className="grid gap-4 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-7">
      {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={cn("flex h-8 w-8 items-center justify-center rounded-md", card.bgColor)}>
              <card.icon className={cn("h-4 w-4", card.color)} />
            </div>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold tabular-nums">{card.value}</div>
          </CardContent>
        </Card>
      ))}
    </div>
  )
}
