import { Card, CardContent } from '@gib/ui';

import type { LandingStatsContent } from './content';

interface StatsProps {
  content: LandingStatsContent;
}

export const Stats = ({ content }: StatsProps) => (
  <section className='container mx-auto px-4 py-24'>
    <div className='mx-auto max-w-6xl'>
      <div className='mb-12 text-center'>
        <h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl md:text-5xl'>
          {content.heading}
        </h2>
        <p className='text-muted-foreground mx-auto max-w-2xl text-lg'>
          {content.description}
        </p>
      </div>

      <div className='grid gap-6 sm:grid-cols-2 xl:grid-cols-4'>
        {content.items.map((item) => (
          <Card
            key={`${item.label}-${item.value}`}
            className='border-border/50'
          >
            <CardContent className='space-y-4 p-6'>
              <div className='text-4xl font-bold tracking-tight'>
                {item.value}
              </div>
              <div className='space-y-2'>
                <h3 className='text-lg font-semibold'>{item.label}</h3>
                <p className='text-muted-foreground text-sm'>
                  {item.description}
                </p>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  </section>
);
