---
export interface Props {
  as?: 'p' | 'span' | 'div';
  size?: 'xs' | 'sm' | 'base' | 'lg' | 'xl';
  color?: 'default' | 'muted' | 'primary' | 'error';
  weight?: 'normal' | 'medium' | 'semibold' | 'bold';
  align?: 'left' | 'center' | 'right' | 'justify';
  class?: string;
}

const {
  as = 'p',
  size = 'base',
  color = 'default',
  weight = 'normal',
  align = 'left',
  class: className = '',
  ...rest
} = Astro.props;

const Tag = as;

const sizes = {
  xs: 'text-xs',
  sm: 'text-sm',
  base: 'text-base',
  lg: 'text-lg',
  xl: 'text-xl'
};

const colors = {
  default: 'text-gray-900 dark:text-gray-100',
  muted: 'text-gray-600 dark:text-gray-400',
  primary: 'text-blue-600 dark:text-blue-400',
  error: 'text-red-600 dark:text-red-400'
};

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',
  justify: 'text-justify'
};

const classes = `${sizes[size]} ${colors[color]} ${weights[weight]} ${alignments[align]} ${className}`;
---

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