import { useTranslations } from "next-intl"
import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card"
import { EmptyState } from "@/shared/components/ui/empty-state"
import { StatItem } from "@/shared/components/ui/stat-item"
import {
  Users,
  CheckCircle2,
  XCircle,
  Clock,
  LogOut,
  FileText,
  School,
  TrendingUp,
  BarChart3,
} from "lucide-react"
import type { AttendanceStats } from "../types"

export function AttendanceStatsCard({ stats }: { stats: AttendanceStats | null }) {
  const t = useTranslations("attendance")

  if (!stats || stats.total === 0) {
    return (
      <EmptyState
        title={t("stats.noData")}
        description={t("stats.noDataDescription")}
        icon={BarChart3}
        className="border-none shadow-none"
      />
    )
  }

  return (
    <Card>
      <CardHeader>
        <CardTitle>{t("title.teacherStats")}</CardTitle>
      </CardHeader>
      <CardContent>
        <div className="grid grid-cols-2 gap-3 md:grid-cols-4">
          <StatItem
            label={t("stats.totalRecords")}
            value={stats.total}
            icon={<Users className="h-4 w-4" />}
          />
          <StatItem
            label={t("stats.present")}
            value={stats.present}
            icon={<CheckCircle2 className="h-4 w-4" />}
          />
          <StatItem
            label={t("stats.absent")}
            value={stats.absent}
            icon={<XCircle className="h-4 w-4" />}
          />
          <StatItem
            label={t("stats.late")}
            value={stats.late}
            icon={<Clock className="h-4 w-4" />}
          />
          <StatItem
            label={t("stats.earlyLeave")}
            value={stats.earlyLeave}
            icon={<LogOut className="h-4 w-4" />}
          />
          <StatItem
            label={t("stats.excused")}
            value={stats.excused}
            icon={<FileText className="h-4 w-4" />}
          />
          <StatItem
            label={t("stats.schoolActivity")}
            value={stats.schoolActivity}
            icon={<School className="h-4 w-4" />}
          />
          <StatItem
            label={t("stats.attendanceRate")}
            value={`${stats.presentRate.toFixed(1)}%`}
            icon={<TrendingUp className="h-4 w-4" />}
          />
          <StatItem
            label={t("stats.lateRate")}
            value={`${stats.lateRate.toFixed(1)}%`}
            icon={<Clock className="h-4 w-4" />}
          />
        </div>
      </CardContent>
    </Card>
  )
}
