"use client";

import Link from "next/link";
import { FolderOpen, FolderPlus, Archive, ChevronRight } from "lucide-react";
import type { CaseSummary } from "@/lib/types";

interface Props {
  data: CaseSummary;
}

export function CaseOverviewGrid({ data }: Props) {
  const safe = data ?? { active_count: 0, new_this_month: 0, closed_count: 0 };
  const items = [
    {
      label: "Aktive Akten",
      value: safe.active_count ?? 0,
      icon: FolderOpen,
      color: "text-blue-600",
      bg: "bg-blue-50",
      href: "/cases?status=active",
    },
    {
      label: "Neu (Monat)",
      value: safe.new_this_month ?? 0,
      icon: FolderPlus,
      color: "text-violet-600",
      bg: "bg-violet-50",
      href: "/cases?status=active&since=month",
    },
    {
      label: "Abgeschlossen",
      value: safe.closed_count ?? 0,
      icon: Archive,
      color: "text-neutral-500",
      bg: "bg-neutral-50",
      href: "/cases?status=closed",
    },
  ];

  return (
    <div className="rounded-xl border border-neutral-200 bg-white p-5">
      <h2 className="text-sm font-semibold text-neutral-900">Aktenübersicht</h2>
      <div className="mt-4 space-y-1">
        {items.map((item) => (
          <Link
            key={item.label}
            href={item.href}
            className="group -mx-2 flex items-center justify-between rounded-lg px-2 py-2 transition-colors hover:bg-neutral-50"
          >
            <div className="flex items-center gap-2.5">
              <div className={`rounded-md p-1.5 ${item.bg}`}>
                <item.icon className={`h-4 w-4 ${item.color}`} />
              </div>
              <span className="text-sm text-neutral-600">{item.label}</span>
            </div>
            <div className="flex items-center gap-1.5">
              <span className="text-lg font-semibold tabular-nums text-neutral-900">
                {item.value}
              </span>
              <ChevronRight className="h-4 w-4 text-neutral-300 transition-colors group-hover:text-neutral-500" />
            </div>
          </Link>
        ))}
      </div>
    </div>
  );
}