import Reveal from "./Reveal";

/** Kepala section: label kecil → judul besar → deskripsi, rata tengah. */
export default function SectionHeading({
  label,
  title,
  description,
}: {
  label: string;
  title: string;
  description?: string;
}) {
  return (
    <Reveal className="mx-auto mb-14 max-w-2xl text-center md:mb-20">
      <span className="inline-flex items-center gap-2 rounded-full border border-line bg-panel px-4 py-1.5 text-[11px] font-medium tracking-[0.18em] text-mist uppercase font-accent">
        <span className="size-1 rounded-full bg-fg" />
        {label}
      </span>
      <h2 className="mt-5 text-3xl font-semibold tracking-tight text-fg md:text-5xl">
        {title}
      </h2>
      {description && (
        <p className="mt-4 text-sm leading-relaxed text-fog md:text-base">
          {description}
        </p>
      )}
    </Reveal>
  );
}