---
import ArrowLongRightIcon from '@/assets/icons/arrow-long-right.svg';
import CardPaymentLink from '@/components/ui/CardPaymentLink.astro';

type Props = {
	number: number;
	title: string;
	text: string;
	/** Optional steps get the white, outlined card. */
	optional?: boolean;
	/** Adds the card payment link under the text. */
	cardPaymentCta?: boolean;
};

const { number, title, text, optional = false, cardPaymentCta = false } = Astro.props;
---

<article
	class:list={[
		'flex h-full flex-col gap-2.5 rounded-card px-5 py-6.25 text-ink',
		optional ? 'border border-mint bg-white' : 'bg-jade',
	]}
>
	<p class="flex items-center gap-2.5 text-xl font-medium">
		{String(number).padStart(2, '0')}
		{number < 4 && <ArrowLongRightIcon class="size-6" aria-hidden="true" />}
	</p>
	<h3 class="text-2xl font-medium">{title}</h3>
	<p class:list={['font-light', optional && 'text-muted']}>{text}</p>
	{cardPaymentCta && <CardPaymentLink class="self-start text-sm" />}
</article>