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

interface TechStackProps {
  content: LandingTechStackContent;
}

export const TechStack = ({ content }: TechStackProps) => (
  <section id='tech-stack' className='border-border/40 bg-muted/30 border-t'>
    <div 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-12 md:grid-cols-3'>
          {content.categories.map((stack) => (
            <div key={stack.category}>
              <h3 className='mb-6 text-xl font-semibold'>{stack.category}</h3>
              <ul className='space-y-4'>
                {stack.technologies.map((tech) => (
                  <li key={tech.name}>
                    <div className='text-foreground font-medium'>
                      {tech.name}
                    </div>
                    <div className='text-muted-foreground text-sm'>
                      {tech.description}
                    </div>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </div>
    </div>
  </section>
);
