import { CountUp } from "@/components/motion/CountUp";
import { Reveal, RevealItem } from "@/components/motion/Reveal";
import type { CapacityRow } from "@/content/capacities";
import { cn } from "@/lib/utils";

/**
 * Capacity figures as a spec sheet. Monospaced, tabular, counting up on view.
 * The numbers are the argument, so they are given the room to be read.
 */
export function CapacityGrid({
  rows,
  columns = 4,
  className,
}: {
  rows: CapacityRow[];
  columns?: 2 | 3 | 4;
  className?: string;
}) {
  return (
    <Reveal
      stagger={0.08}
      className={cn(
        "grid gap-px overflow-hidden border border-[var(--rule)] bg-[var(--rule)]",
        columns === 2 && "sm:grid-cols-2",
        columns === 3 && "sm:grid-cols-2 lg:grid-cols-3",
        columns === 4 && "sm:grid-cols-2 lg:grid-cols-4",
        className,
      )}
    >
      {rows.map((row) => (
        <RevealItem
          key={row.label}
          className="group relative bg-[var(--ink)] p-6 transition-colors duration-500 hover:bg-[var(--ink-2)] lg:p-8"
        >
          {/* Thread that runs along the top edge on hover. */}
          <span className="absolute inset-x-0 top-0 h-px origin-left scale-x-0 bg-[var(--thread)] transition-transform duration-700 ease-[cubic-bezier(0.16,1,0.3,1)] group-hover:scale-x-100" />

          <p className="data text-3xl leading-none text-[var(--cotton)] lg:text-[2.5rem]">
            <CountUp to={row.value} />
          </p>
          <p className="mt-2 font-mono text-[11px] uppercase tracking-[0.18em] text-[var(--thread)]">
            {row.unit}
          </p>
          <h3 className="mt-5 text-sm leading-snug text-[var(--cotton)]/85">
            {row.label}
          </h3>
          {row.note ? (
            <p className="mt-2 text-[13px] leading-relaxed text-[var(--melange)]">
              {row.note}
            </p>
          ) : null}
        </RevealItem>
      ))}
    </Reveal>
  );
}