import { type ReactNode } from 'react'

import { Container } from '@/components/Container'

export function StatsSection({
  eyebrow,
  title,
  titleId,
  stats,
  children,
}: {
  eyebrow?: string
  title: string
  titleId?: string
  stats: Array<{ value: string; label: string }>
  children?: ReactNode
}) {
  return (
    <Container>
      <div className="mx-auto max-w-2xl lg:mx-0 lg:max-w-none">
        {eyebrow ? (
          <p className="text-sm font-semibold uppercase tracking-wide text-blue-600">
            {eyebrow}
          </p>
        ) : null}
        <h2
          id={titleId}
          className="mt-3 text-pretty font-display text-3xl tracking-tight text-slate-900 sm:text-4xl"
        >
          {title}
        </h2>
        <div className="mt-6 flex flex-col gap-x-8 gap-y-12 lg:flex-row">
          {children ? (
            <div className="lg:w-full lg:max-w-2xl lg:flex-auto">{children}</div>
          ) : null}
          <div className="lg:flex lg:flex-auto lg:justify-center">
            <dl className="w-64 space-y-8 xl:w-80">
              {stats.map((stat) => (
                <div key={stat.label} className="flex flex-col-reverse gap-y-3">
                  <dt className="text-base/7 text-slate-600">{stat.label}</dt>
                  <dd className="font-display text-4xl font-semibold tracking-tight text-blue-600 sm:text-5xl">
                    {stat.value}
                  </dd>
                </div>
              ))}
            </dl>
          </div>
        </div>
      </div>
    </Container>
  )
}
