import type { ReactNode } from "react";

export function SectionHeading({
    kicker,
    title,
    subtitle,
    action,
}: {
    kicker: string;
    title: string;
    subtitle?: string;
    action?: ReactNode;
}) {
    return (
        <div className="mb-8">
            <p className="font-mono text-sm text-blurple-soft">
                {"// "}
                {kicker}
            </p>
            <div className="mt-1 flex flex-wrap items-end justify-between gap-3">
                <h2 className="text-3xl font-bold tracking-tight">{title}</h2>
                {action}
            </div>
            {subtitle ? <p className="mt-2 max-w-xl text-zinc-400">{subtitle}</p> : null}
        </div>
    );
}