// FeatureGrid composition — auto-fitting grid of feature cards.
// Tile shape inherits from the shadcn Card primitive.

import type { ReactNode } from 'react'
import { Card, CardHeader, CardTitle, CardDescription } from '../primitives/card'
import { cn } from '../cn'

interface Feature {
  readonly title: string
  readonly body: string
  readonly icon?: ReactNode
}

interface FeatureGridProps {
  readonly sectionTitle?: string
  readonly features: ReadonlyArray<Feature>
  readonly className?: string
}

export const FeatureGrid = ({
  sectionTitle, features, className,
}: FeatureGridProps): ReactNode => (
  <section className={cn('py-16 max-w-6xl mx-auto px-6', className)}>
    {sectionTitle ? (
      <h2 className="text-2xl md:text-3xl font-semibold text-center mb-12 text-foreground">
        {sectionTitle}
      </h2>
    ) : null}
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
      {features.map((f) => (
        <Card key={f.title} className="hover:border-primary/40 transition-colors">
          <CardHeader>
            {f.icon ? <div className="text-primary mb-2">{f.icon}</div> : null}
            <CardTitle className="text-base">{f.title}</CardTitle>
            <CardDescription>{f.body}</CardDescription>
          </CardHeader>
        </Card>
      ))}
    </div>
  </section>
)