import { type ElementType } from "react";

type SectionHeadingProps = {
  /** Full title; first word is rendered with lighter weight, the rest bold. */
  title: string;
  /** Heading element. Default: "h2" */
  as?: ElementType;
  /** Extra class names (e.g. for responsive size). */
  className?: string;
  /** Class for the first (lighter) word. Default: font-medium */
  firstWordClassName?: string;
  /** Class for the rest of the title. Default: font-bold */
  restClassName?: string;
};

export function SectionHeading({
  title,
  as: Tag = "h2",
  className = "",
  firstWordClassName = "font-medium",
  restClassName = "font-bold",
}: SectionHeadingProps) {
  const spaceIndex = title.indexOf(" ");
  const firstWord = spaceIndex === -1 ? title : title.slice(0, spaceIndex);
  const rest = spaceIndex === -1 ? "" : title.slice(spaceIndex + 1);

  return (
    <Tag
      className={`font-[family-name:var(--font-fraunces)] text-2xl tracking-tight text-[var(--foreground)] md:text-3xl flex flex-wrap gap-x-3 gap-y-0 items-baseline ${className}`}
    >
      <span className={`block ${firstWordClassName}`}>{firstWord}</span>
      {rest ? <span className={restClassName}>{rest}</span> : null}
    </Tag>
  );
}
