import type { ReactNode } from "react";

interface Props {
  id: string;
  title: string;
  subtitle?: string;
  children: ReactNode;
}

export function Section({ id, title, subtitle, children }: Props) {
  return (
    <section id={id} className="scroll-mt-16">
      <div className="mb-5 border-b border-slate-100 pb-3">
        <h2 className="text-[18px] font-semibold text-slate-900 tracking-tight">
          {title}
        </h2>
        {subtitle && (
          <p className="text-[12px] text-slate-400 mt-0.5">{subtitle}</p>
        )}
      </div>
      {children}
    </section>
  );
}
