import type { VehicleStat } from "@/lib/content";
import { cn } from "@/lib/utils";

export function StatsRow({
  stats,
  className,
  id,
}: {
  stats: VehicleStat[];
  className?: string;
  id?: string;
}) {
  return (
    <div
      id={id}
      className={cn(
        "grid scroll-mt-24 grid-cols-2 border-y border-line bg-bg md:grid-cols-4",
        className,
      )}
    >
      {stats.map((stat) => (
        <div
          key={stat.label}
          className="flex flex-col items-center justify-center gap-2 border-line px-4 py-10 text-center md:border-r md:py-14 md:last:border-r-0 [&:nth-child(-n+2)]:border-b md:[&:nth-child(-n+2)]:border-b-0 max-md:odd:border-r"
        >
          <p className="font-display text-stat font-semibold uppercase leading-tight tracking-hero">
            {stat.value}
          </p>
          <p className="font-display text-xs font-medium uppercase tracking-wide text-muted">
            {stat.label}
          </p>
        </div>
      ))}
    </div>
  );
}