---
import { AstroError } from 'astro/errors';
import Icon from './Icon.astro';
import { Icons, type StarlightIcon } from '../components/Icons';
import { throwInvalidAsideIconError } from '../integrations/asides-error';

const asideVariants = ['note', 'tip', 'caution', 'danger'] as const;
const icons = { note: 'information', tip: 'rocket', caution: 'warning', danger: 'error' } as const;

interface Props {
	type?: (typeof asideVariants)[number];
	title?: string;
	icon?: StarlightIcon;
}

let { type = 'note', title, icon } = Astro.props;

if (!asideVariants.includes(type)) {
	throw new AstroError(
		'Invalid `type` prop passed to the `<Aside>` component.\n',
		`Received: ${JSON.stringify(type)}\n` +
			`Expected one of ${asideVariants.map((i) => JSON.stringify(i)).join(', ')}`
	);
}

if (icon && !Icons[icon]) throwInvalidAsideIconError(icon);

if (!title) {
	title = Astro.locals.t(`aside.${type}`);
}
---

<aside aria-label={title} class={`starlight-aside starlight-aside--${type}`}>
	<p class="starlight-aside__title" aria-hidden="true">
		<Icon name={icon || icons[type]} class="starlight-aside__icon" />{title}
	</p>
	<div class="starlight-aside__content">
		<slot />
	</div>
</aside>
