"use client";

import { ReactNode } from "react";

export function TeacherStatGrid({
  items,
}: {
  items: Array<{
    key: string;
    label: string;
    value: number | string;
    className?: string;
    accent?: string;
    icon?: ReactNode;
    onClick?: () => void;
  }>;
}) {
  const cols =
    items.length >= 5
      ? "sm:grid-cols-4 lg:grid-cols-5"
      : items.length >= 4
        ? "sm:grid-cols-4"
        : items.length === 3
          ? "sm:grid-cols-3"
          : "";

  return (
    <div className={`grid grid-cols-2 gap-2.5 sm:gap-3 ${cols}`}>
      {items.map((item) => {
        const className = `relative overflow-hidden rounded-xl border bg-white p-3 text-right shadow-sm sm:rounded-2xl sm:p-4 ${
          item.className ?? "border-[var(--border)]"
        } ${item.onClick ? "cursor-pointer transition hover:shadow-md" : ""}`;
        const inner = (
          <>
            {item.accent ? (
              <span
                className="absolute inset-y-0 right-0 w-1 rounded-l"
                style={{ backgroundColor: item.accent }}
                aria-hidden
              />
            ) : null}
            <div className="flex items-start justify-between gap-2">
              <div>
                <div className="text-xs font-medium text-slate-500">{item.label}</div>
                <div className="mt-1 text-xl font-bold tabular-nums tracking-tight text-slate-900 sm:mt-1.5 sm:text-2xl">
                  {item.value}
                </div>
              </div>
              {item.icon ? (
                <span className="flex h-10 w-10 items-center justify-center rounded-full bg-white/80 text-lg">
                  {item.icon}
                </span>
              ) : null}
            </div>
          </>
        );
        if (item.onClick) {
          return (
            <button key={item.key} type="button" onClick={item.onClick} className={className}>
              {inner}
            </button>
          );
        }
        return (
          <div key={item.key} className={className}>
            {inner}
          </div>
        );
      })}
    </div>
  );
}