---
import Button from '@/components/primitives/Button.astro';
import type { CtaLink } from '@/types/site';

interface Props {
    cta: CtaLink;
    class?: string;
    showHelper?: boolean;
    size?: 'lg' | 'md' | 'sm';
}

const { cta, class: className = '', showHelper = false, size = 'md' } = Astro.props;
---

<div class:list={['flex flex-col gap-2', className]} data-cta-slot="secondary">
    <Button href={cta.href} variant={cta.variant ?? 'secondary'} size={size}>
        {cta.label}
    </Button>
    {showHelper && cta.helper && <p class="m-0 text-sm text-[var(--color-copy)]">{cta.helper}</p>}
</div>