import type { SiteStat } from '@/types/booking';

export default function Stats({ stats }: { stats: SiteStat[] }) {
    return (
        <section className="mx-auto max-w-6xl px-4 py-20 sm:px-6 lg:py-28">
            <p className="text-center text-xs tracking-wider text-navy/70 uppercase dark:text-white/70">
                Our Premium Statistics
            </p>

            <div className="mt-10 grid grid-cols-2 gap-y-10 lg:grid-cols-4">
                {stats.map((stat) => (
                    <div
                        key={stat.key}
                        className="flex flex-col items-center text-center lg:border-l lg:border-navy/10 lg:first:border-l-0 dark:lg:border-white/15"
                    >
                        <span className="font-google text-4xl font-semibold text-navy sm:text-5xl dark:text-white">
                            {stat.value}
                        </span>
                        <span className="mt-4 text-xs tracking-wide text-navy/80 uppercase dark:text-white/80">
                            {stat.label}
                        </span>
                    </div>
                ))}
            </div>
        </section>
    );
}