---
import CheckIcon from '@/assets/icons/check.svg';

type Props = {
	items: string[];
	/** `strong`: medium-weight ink text (hero). `muted`: light secondary text. */
	tone?: 'strong' | 'muted';
	class?: string;
};

const { items, tone = 'strong', class: className } = Astro.props;
---

<ul class:list={['flex flex-col', tone === 'muted' && 'gap-3.75', className]}>
	{
		items.map((item) => (
			<li
				class:list={[
					'flex items-center gap-2.5',
					tone === 'strong' ? 'py-2.5 font-medium lg:py-1.25' : 'font-light text-muted',
				]}
			>
				<CheckIcon class="size-5 shrink-0 text-mint" aria-hidden="true" />
				{item}
			</li>
		))
	}
</ul>