---
import type { StudioCMSColorway } from '../../utils/colors.js';
import './badge.css';
import type { HTMLAttributes } from 'astro/types';
import Icon from '../Icon/Icon.astro';
import type { HeroIconName } from '../Icon/iconType.js';

interface Props extends Omit<HTMLAttributes<'span'>, 'color'> {
	/**
	 * The color of the badge. Defaults to `primary`.
	 */
	color?: Omit<StudioCMSColorway, 'default'>;
	/**
	 * The icon to display in the badge.
	 */
	icon?: HeroIconName;
	/**
	 * The icon position. Defaults to `left`.
	 */
	iconPosition?: 'left' | 'right';
	/**
	 * The size of the badge. Defaults to `md`.
	 */
	size?: 'sm' | 'md' | 'lg';
	/**
	 * The variant of the badge. Defaults to `default`.
	 */
	variant?: 'default' | 'flat' | 'outline';
	/**
	 * The rounding of the badge. Full is a half-circle, semi is a quarter-circle. Defaults to `full`.
	 */
	rounding?: 'full' | 'semi';
	/**
	 * The label of the badge.
	 */
	label: string;
}

const {
	color = 'primary',
	icon,
	size = 'md',
	variant = 'default',
	rounding = 'full',
	iconPosition = 'left',
	label,
	class: className,
	...props
} = Astro.props;

let iconSize = 16;
if (size === 'sm') {
	iconSize = 8;
} else if (size === 'lg') {
	iconSize = 24;
}
---

<span class="sui-badge" class:list={[color, size, variant, rounding, className]} {...props}>
	{icon && iconPosition === 'left' && <Icon name={icon} width={iconSize} height={iconSize} />}
  {label}
	{icon && iconPosition === 'right' && <Icon name={icon} width={iconSize} height={iconSize} />}
</span>