"use client";

import Link from "next/link";
import { AlertTriangle, Clock, ClipboardList, CheckCircle2 } from "lucide-react";
import { useDataProvider } from "@/lib/demo/data-provider-context";

interface StatsCardsProps {
  overdue: number;
  dueSoon: number;
  active: number;
  completed: number;
}

const stats = [
  {
    key: "overdue",
    label: "Overdue",
    icon: AlertTriangle,
    iconColor: "text-red-500",
    bgColor: "bg-red-50 dark:bg-red-500/10",
    prop: "overdue" as const,
  },
  {
    key: "dueSoon",
    label: "Due Soon",
    icon: Clock,
    iconColor: "text-amber-500",
    bgColor: "bg-amber-50 dark:bg-amber-500/10",
    prop: "dueSoon" as const,
  },
  {
    key: "active",
    label: "Active",
    icon: ClipboardList,
    iconColor: "text-primary",
    bgColor: "bg-primary/10",
    prop: "active" as const,
  },
  {
    key: "completed",
    label: "Completed",
    icon: CheckCircle2,
    iconColor: "text-brand-clay",
    bgColor: "bg-brand-clay/10",
    prop: "completed" as const,
  },
] as const;

export function StatsCards({ overdue, dueSoon, active, completed }: StatsCardsProps) {
  const values: Record<string, number> = { overdue, dueSoon, active, completed };
  const { basePath } = useDataProvider();

  return (
    <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
      {stats.map((stat) => (
        <Link key={stat.key} href={`${basePath}/tasks`}>
          <div className="group rounded-2xl border border-border bg-card p-5 hover:shadow-[var(--shadow-warm-md)] transition-all hover:-translate-y-0.5 cursor-pointer">
            <div className="flex items-center gap-3 mb-3">
              <div className={`inline-flex items-center justify-center size-9 rounded-xl ${stat.bgColor}`}>
                <stat.icon className={`size-4 ${stat.iconColor}`} />
              </div>
              <span className="text-sm font-medium text-muted-foreground">
                {stat.label}
              </span>
            </div>
            <p className="text-3xl font-bold font-heading tracking-tight">{values[stat.prop]}</p>
          </div>
        </Link>
      ))}
    </div>
  );
}
