---
import Card from '@/components/primitives/Card.astro';
import Eyebrow from '@/components/content/Eyebrow.astro';
import Headline from '@/components/content/Headline.astro';
import Lead from '@/components/content/Lead.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 && <Eyebrow>{content.eyebrow}</Eyebrow>}
    <Headline as="h3" size="card" class="mt-4">
        {content.title}
    </Headline>
    <Lead class="mt-3" size="body">
        {content.description}
    </Lead>
</Card>