import { ReactNode } from "react";

interface TypographyProps {
  children: ReactNode;
  className?: string;
  as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span";
}

export function Headline({ children, className = "", as: Component = "h2" }: TypographyProps) {
  return (
    <Component className={`text-brand-black leading-[0.95] tracking-[-0.05em] font-medium ${className}`}>
      {children}
    </Component>
  );
}

export function Subhead({ children, className = "", as: Component = "p" }: TypographyProps) {
  return (
    <Component className={`font-sans text-brand-black opacity-80 leading-relaxed tracking-[-0.01em] ${className}`}>
      {children}
    </Component>
  );
}

export function SupportText({ children, className = "", as: Component = "p" }: TypographyProps) {
  return (
    <Component className={`text-[11px] uppercase tracking-[0.4em] font-bold text-brand-black/60 ${className}`}>
      {children}
    </Component>
  );
}

export function BodyText({ children, className = "", as: Component = "p" }: TypographyProps) {
  return (
    <Component className={`font-sans leading-relaxed tracking-[-0.01em] text-brand-black/90 ${className}`}>
      {children}
    </Component>
  );
}