---
import { AstroError } from 'astro/errors';
import { slugToLocaleData, urlToSlug } from '../utils/slugs';
import { useTranslations } from '../utils/translations';
import Icon from './Icon.astro';

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;
}

let { type = 'note', title } = 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 (!title) {
	const { locale } = slugToLocaleData(urlToSlug(Astro.url));
	title = useTranslations(locale)(`aside.${type}`);
}
---

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