import React from "react";

interface HeadingProps {
  children: React.ReactNode;
  className?: string;
}

export const H1: React.FC<HeadingProps> = ({ children, className = "" }) => (
  <h1
    className={`not-prose text-3xl md:text-5xl font-bold text-slate-900 mb-8 mt-12 leading-[1.1] tracking-tight font-sans ${className}`}
  >
    {children}
  </h1>
);

export const H2: React.FC<HeadingProps> = ({ children, className = "" }) => (
  <h2
    className={`not-prose text-2xl md:text-4xl font-bold text-slate-900 mb-6 mt-10 leading-tight tracking-tight font-sans ${className}`}
  >
    {children}
  </h2>
);

export const H3: React.FC<HeadingProps> = ({ children, className = "" }) => (
  <h3
    className={`not-prose text-xl md:text-2xl font-bold text-slate-900 mb-4 mt-8 leading-snug tracking-tight font-sans ${className}`}
  >
    {children}
  </h3>
);