<!-- source-hash: 1e81d4824ea961afeed724a543f401a4 -->
This file defines TypeScript interfaces for managing product categories and their display components in an e-commerce or marketplace application.

## Key Components

- **`Category`** - Main category interface with display properties including slug, counts, and icon URLs
- **`CategoryCardProps`** - Legacy interface for backward compatibility with existing category card components
- **`RealCategory`** - Database-aligned interface matching the actual data structure with subcategories
- **`RealCategoryCardProps`** - Props interface for components using the real category structure
- **`CategoryWithStats`** - Extended category interface that includes computed statistics for display

## Usage Example

```typescript
import { Category, RealCategory, CategoryWithStats } from './categories';

// Using the main Category interface
const category: Category = {
  id: 'electronics',
  title: 'Electronics',
  description: 'Electronic devices and accessories',
  subcategoriesCount: 5,
  productsCount: 150,
  iconUrls: ['icon1.png', 'icon2.png'],
  slug: 'electronics'
};

// Database category with subcategories
const dbCategory: RealCategory = {
  id: 1,
  name: 'Electronics',
  slug: 'electronics',
  description: 'Electronic devices and accessories',
  vendor_subcategory: [
    {
      id: 1,
      name: 'Smartphones',
      slug: 'smartphones',
      description: 'Mobile phones and accessories'
    }
  ]
};

// Category with computed statistics
const categoryWithStats: CategoryWithStats = {
  ...dbCategory,
  vendorCount: 25,
  subcategoryCount: 3
};
```