# EntityCard Pattern (MANDATORY)

**ALWAYS use `EntityCard` for entity cards. NEVER use custom cards with divs.**

```typescript
import { EntityCard, ProviderCard, TemplateCard } from '@/components/ui/EntityCard';
```

## EntityCard Usage
```tsx
<EntityCard
  avatar={{ letter: 'O', color: '#10a37f' }}
  title="OpenAI" subtitle="openai"
  description="OpenAI GPT models"
  stats="15 model(s)"
  badge={{ icon: Shield, tooltip: 'Admin API supported' }}
  links={[{ icon: ExternalLink, label: 'Website', href: 'https://...' }]}
  actions={[{ label: 'Config', onClick: () => {}, variant: 'primary' }]}
/>
```

## ProviderCard Usage (AI Providers)
```tsx
<ProviderCard name="OpenAI" code="openai" description="..." modelCount={15} color="#10a37f"
  websiteUrl="..." docsUrl="..." apiKeyUrl="..." hasAdminKey />
```

## TemplateCard Usage (Templates)
```tsx
<TemplateCard name="Welcome" code="welcome" category="Transactional" isActive isSystem
  icon={Mail} translationsCount={3} onClick={() => {}} onEdit={() => {}} onDelete={() => {}} />
```

## EntityCard Props
| Prop | Type |
|------|------|
| `avatar` | `{ letter, color, imageUrl? }` |
| `title`, `subtitle`, `description` | `string` |
| `stats` | `string` |
| `badge` | `{ icon?, tooltip?, color? }` |
| `links` | `Array<{ icon, label, href?, onClick? }>` |
| `actions` | `Array<{ label, href?, onClick?, variant, icon?, disabled? }>` |

## Action Variants (EntityCard)
| Variant | Style |
|---------|-------|
| `primary` | `bg-[var(--color-accent-600)] text-white` |
| `secondary` | `bg-[var(--bg-secondary)] text-[var(--text-secondary)]` |
| `ghost` | `text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]` (NO border!) |

## Custom Cards (Status, Dashboard)

Button alignment pattern at bottom (mandatory for custom cards):

```tsx
// WARNING: h-full flex flex-col + flex-1 + mt-auto
<div className="h-full flex flex-col rounded-[var(--radius-card)] border ...">
  {/* Header */}
  <div className="px-4 py-3 bg-gradient-to-r from-[var(--color-accent-500)]/10 ...">
    {/* ... */}
  </div>
  {/* Content with flex-1 */}
  <div className="flex-1 flex flex-col p-4">
    {/* Variable content */}
    {/* WARNING: mt-auto for button at bottom */}
    <button className="mt-auto w-full ...">Action</button>
  </div>
</div>
```

## When to Use EntityCard vs Custom

| EntityCard for | Custom for |
|----------------|------------|
| Homogeneous entity lists | Dashboard stats cards |
| Catalogs | Cards with complex interactive states |
| Clickable grids | Cards with integrated forms |
