import React from "react";

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

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

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

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