import * as React from "react";

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

export const H1: React.FC<TypographyProps> = ({ children, className = "" }) => (
  <h1
    className={`text-4xl md:text-7xl font-bold text-slate-900 tracking-tighter leading-[1.1] ${className}`}
  >
    {children}
  </h1>
);

export const H2: React.FC<TypographyProps> = ({ children, className = "" }) => (
  <h2
    className={`text-xl md:text-5xl font-bold text-slate-900 tracking-tighter leading-tight ${className}`}
  >
    {children}
  </h2>
);

export const H3: React.FC<TypographyProps> = ({ children, className = "" }) => (
  <h3
    className={`text-lg md:text-4xl font-bold text-slate-900 tracking-tight leading-tight ${className}`}
  >
    {children}
  </h3>
);

export const H4: React.FC<TypographyProps> = ({ children, className = "" }) => (
  <h4
    className={`text-base md:text-2xl font-bold text-slate-900 tracking-tight ${className}`}
  >
    {children}
  </h4>
);

export const LeadText: React.FC<TypographyProps> = ({
  children,
  className = "",
}) => (
  <div
    className={`text-sm md:text-xl font-serif italic text-slate-500 leading-relaxed ${className}`}
  >
    {children}
  </div>
);

export const BodyText: React.FC<TypographyProps> = ({
  children,
  className = "",
}) => (
  <div
    className={`text-sm md:text-base text-slate-500 leading-relaxed ${className}`}
  >
    {children}
  </div>
);

export const Label: React.FC<TypographyProps> = ({
  children,
  className = "",
}) => (
  <span
    className={`text-[10px] font-bold uppercase tracking-[0.3em] text-slate-400 block ${className}`}
  >
    {children}
  </span>
);

export const MonoLabel: React.FC<TypographyProps> = ({
  children,
  className = "",
}) => (
  <span
    className={`text-[10px] font-mono uppercase tracking-[0.2em] text-slate-400 block ${className}`}
  >
    {children}
  </span>
);