import type { ReactNode } from "react";

export function Section({
  title,
  subtitle,
  children,
  actions,
}: {
  title: string;
  subtitle?: string;
  children: ReactNode;
  actions?: ReactNode;
}) {
  return (
    <section className="rounded-lg border border-surface-2 bg-surface-0">
      <div className="flex items-start justify-between gap-4 border-b border-surface-2/50 px-4 py-3">
        <div>
          <h2 className="text-sm font-semibold uppercase tracking-wider text-text-secondary">{title}</h2>
          {subtitle ? <p className="mt-0.5 text-xs text-text-muted">{subtitle}</p> : null}
        </div>
        {actions}
      </div>
      <div className="px-4 py-3">{children}</div>
    </section>
  );
}