---
import { Icon } from 'astro-icon/components';
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 { FeatureItemContent } from '@/types/site';

interface Props {
    item: FeatureItemContent;
}

const { item } = Astro.props;

const lucideMap: Record<string, string> = {
    'shield': 'lucide:shield',
    'database': 'lucide:database',
    'refresh': 'lucide:refresh-cw',
    'eye': 'lucide:eye',
    'file-check': 'lucide:file-check',
    'layers': 'lucide:layers',
    'search': 'lucide:search',
    'lock': 'lucide:lock',
    'zap': 'lucide:zap',
    'clipboard': 'lucide:clipboard-list',
    'git-branch': 'lucide:git-branch',
    'bar-chart': 'lucide:bar-chart-3',
    'activity': 'lucide:activity',
    'settings': 'lucide:settings',
    'globe': 'lucide:globe',
    'users': 'lucide:users',
    'check-circle': 'lucide:check-circle',
    'archive': 'lucide:archive',
    'trending-up': 'lucide:trending-up',
    'cpu': 'lucide:cpu',
};

const iconName = item.icon ? lucideMap[item.icon] : undefined;
---

<Card class="h-full" hoverable>
    <div class="space-y-3">
        {iconName && (
            <div class="feature-icon">
                <Icon name={iconName} size={20} />
            </div>
        )}
        {item.eyebrow && <Eyebrow>{item.eyebrow}</Eyebrow>}
        <Headline as="h3" size="card">
            {item.title}
        </Headline>
        <Lead size="body">
            {item.description}
        </Lead>
        {(item.meta || item.href) && (
            <div class="mt-2 flex flex-wrap items-center gap-3 text-sm">
                {item.meta && <span class="text-[var(--color-brand)]">{item.meta}</span>}
                {item.href && (
                    <a class="text-link font-semibold" href={item.href}>
                        Learn more
                    </a>
                )}
            </div>
        )}
    </div>
</Card>