import React, { ReactNode, HTMLAttributes } from 'react';
import { Stack } from './Stack';

interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
  level: 1 | 2 | 3 | 4 | 5 | 6;
  children: ReactNode;
  className?: string;
  style?: React.CSSProperties;
  icon?: ReactNode;
}

export function Heading({ level, children, className = '', style, icon, ...props }: HeadingProps) {
  const Tag = `h${level}` as 'h1';
  
  const levelClasses = {
    1: 'text-3xl md:text-4xl font-bold text-white',
    2: 'text-xl font-semibold text-white',
    3: 'text-lg font-semibold text-white',
    4: 'text-base font-semibold text-white',
    5: 'text-sm font-semibold text-white',
    6: 'text-xs font-semibold text-white',
  };

  const classes = [levelClasses[level], className].filter(Boolean).join(' ');

  const content = icon ? (
    <Stack direction="row" align="center" gap={2}>
      {icon}
      {children}
    </Stack>
  ) : children;

  return <Tag className={classes} style={style} {...props}>{content}</Tag>;
}