import { Reveal } from "@/components/motion/Reveal";
import type { ReactNode } from "react";

export default function SectionHead({
  eyebrow,
  title,
  lede,
  light = false,
  className = "",
}: {
  eyebrow: string;
  title: ReactNode;
  lede?: ReactNode;
  light?: boolean;
  className?: string;
}) {
  return (
    <Reveal className={`max-w-[820px] ${className}`}>
      <p className="eyebrow">{eyebrow}</p>
      <h2 className="mt-4 text-[clamp(2rem,3.6vw,3.1rem)] font-semibold">{title}</h2>
      {lede ? (
        <p
          className={`mt-5 max-w-[62ch] text-[clamp(1.05rem,1.4vw,1.2rem)] leading-relaxed ${
            light ? "text-lmid" : "text-tmid"
          }`}
        >
          {lede}
        </p>
      ) : null}
    </Reveal>
  );
}