---
import type { Icons } from '@components/icons/Icon.astro';
import Icon from '@components/icons/Icon.astro';
import type { HTMLAttributes } from 'astro/types';

interface Props extends HTMLAttributes<'div'> {
	icon: Icons
	text?: string
}

const {
	icon,
	text = 'Hiiii',
	...rest
} = Astro.props;
---

<!-- pt-1 added temporarily cause for some reason the icon's padding doesn't apply unless I add this. the wonders of CSS. -->
<div {...rest} class="rounded-xl bg-primary-100 w-[256px] shrink-0">
	<Icon icon={icon} size={48} class="my-[28px] mx-auto text-white"></Icon>
	<p class="text-white mx-auto bg-primary-200 rounded-b-xl text-[14px] py-[7px] pl-[12px] pr-[32px]">{text}</p>
</div>