import { cn } from "~/utils/cn";

const SIZES = {
  hero: "text-3xl sm:text-4xl lg:text-5xl",
  section: "text-2xl sm:text-3xl",
} as const;

type Props = {
  title: string;
  level?: 1 | 2;
  size?: keyof typeof SIZES;
  className?: string;
};

/** Marketing headline. One plain statement, one color, one weight. */
export function DisplayTitle({ title, level = 2, size = "section", className }: Props) {
  const Tag = `h${level}` as const;
  return (
    <Tag className={cn("leading-tight font-semibold tracking-tight text-balance text-white", SIZES[size], className)}>
      {title}
    </Tag>
  );
}