import Badge from '@/components/Badge'

const skills = [
  {
    category: 'Programming',
    items: ['TypeScript', 'JavaScript', 'Go', 'Python', 'SQL'],
  },
  {
    category: 'Tools',
    items: ['React', 'Next.js', 'Tailwind CSS', 'Node.js', 'PostgreSQL', 'Docker', 'Git'],
  },
  {
    category: 'Focus Areas',
    items: ['Web Performance', 'Developer Experience', 'API Design', 'UI Engineering'],
  },
]

export default function Skills() {
  return (
    <section className="mx-auto max-w-5xl px-6 py-16">
      <h2 className="mb-8 text-2xl font-semibold text-zinc-900 dark:text-white">Skills</h2>
      <dl className="flex flex-col gap-6">
        {skills.map(({ category, items }) => (
          <div key={category} className="flex flex-col gap-3 sm:flex-row sm:gap-8">
            <dt className="w-36 shrink-0 pt-0.5 text-sm text-zinc-500">{category}</dt>
            <dd>
              <ul className="flex flex-wrap gap-2">
                {items.map((item) => (
                  <li key={item}>
                    <Badge label={item} />
                  </li>
                ))}
              </ul>
            </dd>
          </div>
        ))}
      </dl>
    </section>
  )
}