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

interface Props {
    content: CalloutContent;
}

const { content } = Astro.props;
const variant = content.tone === 'accent' ? 'accent' : content.tone === 'subtle' ? 'subtle' : 'default';
---

<Card variant={variant}>
    {content.eyebrow && (
        <p class="m-0 text-xs font-semibold uppercase tracking-[0.16em] text-[var(--color-brand)]">
            {content.eyebrow}
        </p>
    )}
    <h3 class="mt-4 text-2xl font-semibold tracking-[-0.03em] text-[var(--color-ink-900)]">
        {content.title}
    </h3>
    <p class="mt-3 text-base leading-7 text-[var(--color-copy)]">{content.description}</p>
</Card>