import type { HTMLAttributes, ReactNode } from "react";

export type MetricGridColumns = 1 | 2 | 3 | 4 | 5 | "auto";
export type MetricGridDensity = "compact" | "default" | "loose";
export type MetricGridSpacing = "block" | "inset" | "none";
export type MetricGridMinimum = "fluid" | "compact" | "default" | "wide";
export type MetricGridCollapseAt = "narrow" | "workspace" | "standard" | "wide" | "never";

export type MetricGridProps = HTMLAttributes<HTMLDivElement> & {
  children: ReactNode;
  columns?: MetricGridColumns;
  density?: MetricGridDensity;
  spacing?: MetricGridSpacing;
  minimum?: MetricGridMinimum;
  collapseAt?: MetricGridCollapseAt;
};

export default function MetricGrid({
  children,
  columns = 4,
  density = "default",
  spacing = "block",
  minimum = "default",
  collapseAt = "workspace",
  className = "",
  ...props
}: MetricGridProps) {
  return (
    <div
      {...props}
      className={[
        "metric-group-layout",
        `metric-group-columns-${columns}`,
        `metric-group-density-${density}`,
        `metric-group-spacing-${spacing}`,
        `metric-group-minimum-${minimum}`,
        `metric-group-collapse-${collapseAt}`,
        className
      ].filter(Boolean).join(" ")}
    >
      {children}
    </div>
  );
}