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

interface Props {
    item: FeatureItemContent;
}

const { item } = Astro.props;
---

<Card class="h-full">
    {item.eyebrow && (
        <p class="m-0 text-xs font-semibold uppercase tracking-[0.16em] text-[var(--color-brand)]">
            {item.eyebrow}
        </p>
    )}
    <h3 class="mt-4 text-2xl font-semibold tracking-[-0.03em] text-[var(--color-ink-900)]">
        {item.title}
    </h3>
    <p class="mt-3 text-base leading-7 text-[var(--color-copy)]">{item.description}</p>
    {(item.meta || item.href) && (
        <div class="mt-5 flex flex-wrap items-center gap-3 text-sm">
            {item.meta && <span class="text-[var(--color-brand)]">{item.meta}</span>}
            {item.href && (
                <a class="font-semibold text-[var(--color-ink-900)] underline decoration-[rgba(17,36,58,0.18)] underline-offset-4" href={item.href}>
                    Learn more
                </a>
            )}
        </div>
    )}
</Card>