import type { ReactNode } from 'react';

type Props = {
  title: string;
  subtitle?: string;
  children: ReactNode;
};

export function Section({ title, subtitle, children }: Props) {
  return (
    <section className="card-neon space-y-4">
      <header className="flex items-baseline gap-3 pb-2 border-b border-[color:var(--color-border)]">
        <h2 className="font-display uppercase tracking-widest text-lg text-[color:var(--color-cyan)] glow-text-cyan">
          {title}
        </h2>
        {subtitle && (
          <span className="font-mono text-xs text-[color:var(--color-text-dim)]">{subtitle}</span>
        )}
      </header>
      <div className="space-y-4">{children}</div>
    </section>
  );
}
