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

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

interface FeaturesProps {
  content: LandingFeaturesContent;
}

export const Features = ({ content }: FeaturesProps) => (
  <section id='features' className='container mx-auto px-4 py-24'>
    <div className='mx-auto max-w-6xl'>
      <div className='mb-16 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 md:grid-cols-2 lg:grid-cols-3'>
        {content.items.map((feature) => (
          <Card
            key={`${feature.title}-${feature.icon}`}
            className='border-border/40'
          >
            <CardHeader className='flex items-center gap-2'>
              <div className='mb-2 text-3xl'>{feature.icon}</div>
              <CardTitle className='text-xl'>{feature.title}</CardTitle>
            </CardHeader>
            <CardContent>
              <p className='text-muted-foreground'>{feature.description}</p>
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  </section>
);
