import type { ReactNode } from "react";
import { Reveal } from "./Reveal";

export function SectionHead({
  tag,
  title,
  desc,
  center = false,
  headingId,
}: {
  tag: string;
  title: ReactNode;
  desc?: string;
  center?: boolean;
  headingId?: string;
}) {
  return (
    <div className={center ? "text-center" : ""}>
      <Reveal>
        <div
          className={`flex items-center gap-3 ${center ? "justify-center" : ""}`}
        >
          <span className="font-mono text-sm text-accent">{"//"}</span>
          <span className="font-mono text-xs tracking-[0.25em] text-muted">
            {tag}
          </span>
          <span className="h-px w-14 bg-line" />
        </div>
      </Reveal>
      <Reveal delay={0.08}>
        <h2
          id={headingId}
          className="mt-5 text-3xl font-black leading-[1.25] md:text-5xl md:leading-[1.2]"
        >
          {title}
        </h2>
      </Reveal>
      {desc ? (
        <Reveal delay={0.16}>
          <p
            className={`mt-5 max-w-xl leading-8 text-muted ${
              center ? "mx-auto" : ""
            }`}
          >
            {desc}
          </p>
        </Reveal>
      ) : null}
    </div>
  );
}