import { CountUp, Reveal } from "./motion";

const stats = [
  { value: 752, suffix: " km", label: "Addis Ababa to Djibouti, electrified standard gauge" },
  { value: 16, prefix: "~", suffix: " h", label: "Mojo Dry Port to Djibouti Port transit" },
  { value: 2, label: "Countries connected by one railway" },
  { text: "24/7", label: "Booking and tracking online" },
] as const;

export function Stats() {
  return (
    <section className="border-t border-edr-border bg-edr-surface py-16">
      <div className="mx-auto max-w-6xl px-6">
        <Reveal>
          <dl className="grid grid-cols-2 gap-x-6 gap-y-10 lg:grid-cols-4">
            {stats.map((stat) => (
              <div key={stat.label}>
                <dt className="text-3xl font-extrabold tracking-tight text-edr-ink md:text-4xl">
                  {"text" in stat ? (
                    stat.text
                  ) : (
                    <CountUp
                      value={stat.value}
                      prefix={"prefix" in stat ? stat.prefix : ""}
                      suffix={"suffix" in stat ? stat.suffix : ""}
                    />
                  )}
                </dt>
                <dd className="mt-2 text-sm leading-relaxed text-edr-muted">{stat.label}</dd>
              </div>
            ))}
          </dl>
        </Reveal>
      </div>
    </section>
  );
}