"use client";

import { Card, CardContent } from "@/components/ui/card";
import { cn } from "@/lib/utils";
import {
  Clock,
  AlertCircle,
  CheckCircle2,
  XCircle,
  TrendingUp,
} from "lucide-react";
import type { DashboardStats } from "@/types";

interface StatsCardsProps {
  stats: DashboardStats;
}

export function StatsCards({ stats }: StatsCardsProps) {
  const cards = [
    {
      label: "Awaiting Review",
      value: stats.awaitingReview,
      icon: Clock,
      color: "text-amber-400",
      bg: "bg-amber-500/10",
      ring: "ring-amber-500/20",
    },
    {
      label: "Needs Revisions",
      value: stats.needsRevisions,
      icon: AlertCircle,
      color: "text-orange-400",
      bg: "bg-orange-500/10",
      ring: "ring-orange-500/20",
    },
    {
      label: "Approved",
      value: stats.approved,
      icon: CheckCircle2,
      color: "text-emerald-400",
      bg: "bg-emerald-500/10",
      ring: "ring-emerald-500/20",
    },
    {
      label: "Overdue Tasks",
      value: stats.tasksOverdue ?? stats.overdue,
      icon: XCircle,
      color: "text-red-400",
      bg: "bg-red-500/10",
      ring: "ring-red-500/20",
    },
    {
      label: "Active Projects",
      value: stats.activeProjects,
      icon: TrendingUp,
      color: "text-blue-400",
      bg: "bg-blue-500/10",
      ring: "ring-blue-500/20",
    },
  ];

  return (
    <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-4">
      {cards.map((card) => {
        const Icon = card.icon;
        return (
          <Card key={card.label}>
            <CardContent className="p-4">
              <div className="flex items-center justify-between mb-3">
                <div className={cn("p-2 rounded-md", card.bg)}>
                  <Icon className={cn("h-4 w-4", card.color)} />
                </div>
              </div>
              <p className="text-3xl font-bold text-white">
                {card.value}
              </p>
              <p className="text-sm text-zinc-400 mt-0.5">{card.label}</p>
            </CardContent>
          </Card>
        );
      })}
    </div>
  );
}