import React from 'react';

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

export const H1: React.FC<TypographyProps> = ({ children, className = '' }) => (
  <h1 className={`text-4xl font-semibold tracking-tight text-foreground ${className}`}>
    {children}
  </h1>
);

export const H2: React.FC<TypographyProps> = ({ children, className = '' }) => (
  <h2 className={`text-3xl font-semibold tracking-tight text-foreground ${className}`}>
    {children}
  </h2>
);

export const H3: React.FC<TypographyProps> = ({ children, className = '' }) => (
  <h3 className={`text-2xl font-semibold tracking-tight text-foreground ${className}`}>
    {children}
  </h3>
);

export const H4: React.FC<TypographyProps> = ({ children, className = '' }) => (
  <h4 className={`text-xl font-semibold tracking-tight text-foreground ${className}`}>
    {children}
  </h4>
);

export const H5: React.FC<TypographyProps> = ({ children, className = '' }) => (
  <h5 className={`text-lg font-semibold text-foreground ${className}`}>
    {children}
  </h5>
);

export const H6: React.FC<TypographyProps> = ({ children, className = '' }) => (
  <h6 className={`text-base font-semibold text-foreground ${className}`}>
    {children}
  </h6>
);

export const P: React.FC<TypographyProps> = ({ children, className = '' }) => (
  <p className={`text-base leading-relaxed text-foreground ${className}`}>
    {children}
  </p>
);

export const Lead: React.FC<TypographyProps> = ({ children, className = '' }) => (
  <p className={`text-lg leading-relaxed text-muted-foreground ${className}`}>
    {children}
  </p>
);

export const Small: React.FC<TypographyProps> = ({ children, className = '' }) => (
  <small className={`text-sm leading-snug text-muted-foreground ${className}`}>
    {children}
  </small>
);

export const Muted: React.FC<TypographyProps> = ({ children, className = '' }) => (
  <p className={`text-sm text-muted-foreground ${className}`}>
    {children}
  </p>
);

export const Code: React.FC<TypographyProps> = ({ children, className = '' }) => (
  <code className={`relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-medium text-foreground ${className}`}>
    {children}
  </code>
);
