const items = [
  {
    title: 'Portfolio site',
    description: 'Designing and building this site with Next.js and Tailwind CSS.',
  },
  {
    title: 'Open-source CLI tool',
    description: 'A developer utility written in Go for automating local environments.',
  },
  {
    title: 'Design system',
    description: 'A component library for internal use — exploring composability patterns.',
  },
  {
    title: 'Learning Rust',
    description: 'Working through systems programming concepts and small weekend projects.',
  },
]

export default function CurrentWork() {
  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">What I&apos;m Working On</h2>
      <ul className="divide-y divide-zinc-200 border-y border-zinc-200 dark:divide-zinc-800 dark:border-zinc-800">
        {items.map(({ title, description }) => (
          <li key={title} className="flex flex-col gap-1 py-5 transition-colors hover:text-zinc-900 dark:hover:text-white sm:flex-row sm:gap-8">
            <span className="w-48 shrink-0 text-sm font-medium text-zinc-900 dark:text-white">{title}</span>
            <span className="text-sm text-zinc-600 dark:text-zinc-400">{description}</span>
          </li>
        ))}
      </ul>
    </section>
  )
}