---
export interface Props {
  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
  size?: '1' | '2' | '3' | '4' | '5' | '6';
  weight?: 'normal' | 'medium' | 'semibold' | 'bold';
  align?: 'left' | 'center' | 'right';
  class?: string;
}

const {
  as = 'h2',
  size,
  weight = 'bold',
  align = 'left',
  class: className = '',
  ...rest
} = Astro.props;

const Tag = as;
const headingSize = size || as.replace('h', '');

const sizes = {
  '1': 'text-4xl md:text-5xl lg:text-6xl',
  '2': 'text-3xl md:text-4xl lg:text-5xl',
  '3': 'text-2xl md:text-3xl lg:text-4xl',
  '4': 'text-xl md:text-2xl lg:text-3xl',
  '5': 'text-lg md:text-xl lg:text-2xl',
  '6': 'text-base md:text-lg lg:text-xl'
};

const weights = {
  normal: 'font-normal',
  medium: 'font-medium',
  semibold: 'font-semibold',
  bold: 'font-bold'
};

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

const classes = `text-gray-900 dark:text-gray-100 ${sizes[headingSize]} ${weights[weight]} ${alignments[align]} ${className}`;
---

<Tag class={classes} {...rest}>
  <slot />
</Tag>