import React from 'react';
import { cn } from './utils';

export function Heading({
  level = 2,
  children,
  className,
  subtitle,
  align = 'left'
}: {
  level?: 1 | 2 | 3 | 4 | 5 | 6;
  children: React.ReactNode;
  className?: string;
  subtitle?: string;
  align?: 'left' | 'center' | 'right';
}) {
  const Tag = `h${level}` as any;
  
  const sizes = {
    1: 'text-4xl md:text-6xl lg:text-7xl xl:text-8xl font-extrabold leading-[1.1] tracking-tight',
    2: 'text-3xl md:text-5xl lg:text-6xl font-bold leading-[1.2] tracking-tight',
    3: 'text-2xl md:text-3xl lg:text-4xl font-bold leading-[1.3] tracking-tight',
    4: 'text-xl md:text-2xl font-bold leading-[1.4]',
    5: 'text-lg md:text-xl font-bold leading-[1.5]',
    6: 'text-base md:text-lg font-semibold leading-[1.6]',
  };

  const alignments = {
    left: 'text-left',
    center: 'text-center mx-auto',
    right: 'text-right',
  };

  return (
    <div className={cn('mb-6 md:mb-12 text-primary', alignments[align], className)}>
      {subtitle && (
        <span className="inline-block text-accent font-bold tracking-widest uppercase text-xs md:text-sm mb-3 md:mb-4 animate-fade-in">
          {subtitle}
        </span>
      )}
      <Tag className={cn(sizes[level as keyof typeof sizes])}>
        {children}
      </Tag>
    </div>
  );
}