"use client";

import * as React from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Users, GraduationCap, BookOpen, Building } from "lucide-react";

interface StatsCardProps {
  title: string;
  value: number;
  description: string;
  icon: React.ReactNode;
  loading?: boolean;
}

function StatsCard({ title, value, description, icon, loading }: StatsCardProps) {
  return (
    <Card>
      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
        <CardTitle className="text-sm font-medium">{title}</CardTitle>
        {icon}
      </CardHeader>
      <CardContent>
        <div className="text-2xl font-bold">
          {loading ? <div className="bg-muted h-7 w-16 animate-pulse rounded" /> : value.toLocaleString()}
        </div>
        <p className="text-muted-foreground text-xs">{description}</p>
      </CardContent>
    </Card>
  );
}

interface DashboardStatsCardsProps {
  totals?: {
    siswa: number;
    guru: number;
    jurusan: number;
    mapel: number;
  };
  loading?: boolean;
}

export function DashboardStatsCards({ totals, loading }: DashboardStatsCardsProps) {
  const statsData = [
    {
      title: "Total Siswa",
      value: totals?.siswa || 0,
      description: "Siswa terdaftar",
      icon: <Users className="text-muted-foreground h-4 w-4" />,
    },
    {
      title: "Total Guru",
      value: totals?.guru || 0,
      description: "Guru aktif",
      icon: <GraduationCap className="text-muted-foreground h-4 w-4" />,
    },
    {
      title: "Total Jurusan",
      value: totals?.jurusan || 0,
      description: "Program studi",
      icon: <Building className="text-muted-foreground h-4 w-4" />,
    },
    {
      title: "Mata Pelajaran",
      value: totals?.mapel || 0,
      description: "Mata pelajaran tersedia",
      icon: <BookOpen className="text-muted-foreground h-4 w-4" />,
    },
  ];

  return (
    <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
      {statsData.map((stat, index) => (
        <StatsCard
          key={index}
          title={stat.title}
          value={stat.value}
          description={stat.description}
          icon={stat.icon}
          loading={loading}
        />
      ))}
    </div>
  );
}