"use client";

import { cn } from "@/shared/utils";

export interface StatGridItem {
  /** Optional icon to display */
  icon?: React.ReactNode;
  /** Label for the stat */
  label: string;
  /** Value to display (can be string, number, or React node like StatusPill) */
  value: React.ReactNode;
}

export interface DetailStatsGridProps {
  /** Array of stat items to display */
  items: StatGridItem[];
  /** Number of columns (default: 4 on md screens) */
  columns?: 2 | 3 | 4;
  /** Optional additional class names */
  className?: string;
}

const COLUMN_CLASSES: Record<2 | 3 | 4, string> = {
  2: "grid-cols-2",
  3: "grid-cols-2 md:grid-cols-3",
  4: "grid-cols-2 md:grid-cols-4",
};

/**
 * DetailStatsGrid - Reusable stats grid for detail pages.
 *
 * Used across detail pages (Orders, Subscriptions) to display key stats
 * in a consistent grid layout with individual card styling.
 */
export function DetailStatsGrid({ items, columns = 4, className }: DetailStatsGridProps) {
  return (
    <div className={cn("grid gap-4", COLUMN_CLASSES[columns], className)}>
      {items.map((item, index) => (
        <div
          key={index}
          className="bg-card rounded-xl border border-border p-4 shadow-[var(--cp-shadow-1)]"
        >
          <div className="flex items-center gap-3">
            {item.icon && (
              <div className="flex h-9 w-9 items-center justify-center rounded-lg bg-muted/50 text-muted-foreground flex-shrink-0">
                {item.icon}
              </div>
            )}
            <div className="min-w-0">
              <p className="text-xs font-medium text-muted-foreground">{item.label}</p>
              <div className="font-semibold text-foreground">{item.value}</div>
            </div>
          </div>
        </div>
      ))}
    </div>
  );
}
