import React, { ReactNode } from 'react';

interface HeadingProps {
  level: 1 | 2 | 3;
  children: ReactNode;
  className?: string;
  style?: React.CSSProperties;
}

export default function Heading({ level, children, className = '', style }: HeadingProps) {
  const baseStyles = 'font-bold tracking-tight';
  
  const levelStyles = {
    1: 'text-4xl sm:text-6xl',
    2: 'text-3xl sm:text-4xl',
    3: 'text-xl sm:text-2xl'
  };

  const Tag = `h${level}` as keyof JSX.IntrinsicElements;

  return (
    <Tag className={`${baseStyles} ${levelStyles[level]} ${className}`} style={style}>
      {children}
    </Tag>
  );
}