import * as React from "react"

export function Section({ id, title, icon: Icon, children }: { id: string; title: string; icon: any; children: React.ReactNode }) {
  return (
    <section id={id} className="rounded-2xl border bg-white/70 dark:bg-neutral-900/60 p-4 scroll-mt-24">
      <header className="flex items-center gap-2 mb-2">
        <div className="h-8 w-8 rounded-lg grid place-items-center border bg-white/80"><Icon className="h-4 w-4" /></div>
        <h3 className="text-sm font-semibold">{title}</h3>
      </header>
      {children}
    </section>
  )
}