# Layout-Specific Components

This document explains how layout-specific components work, including ProductCard, Homepage, and Product Page.

## Overview

Each layout can have its own versions of:

- **ProductCard** - Product card component used throughout the site
- **Homepage** - Home page component
- **Product Page** - Individual product detail page

## Structure

```
src/
├── themes/
│   └── layout-1/
│       ├── components/
│       │   └── ProductCard/        # Layout-1's ProductCard
│       │       ├── index.jsx
│       │       ├── ActionButton.jsx
│       │       └── PriceDisplay.jsx
│       ├── pages/
│       │   ├── Home.jsx            # Layout-1's Homepage
│       │   └── Product.jsx         # Layout-1's Product Page
│       └── index.js
├── components/
│   └── shared/
│       └── ProductCard/
│           └── index.jsx           # Layout-aware wrapper
├── pages/
│   ├── index.jsx                   # Route wrapper (calls home/index.jsx)
│   ├── home/
│   │   └── index.jsx               # Layout-aware Homepage wrapper
│   └── product/
│       └── [id].jsx                # Layout-aware Product Page wrapper
```

## How It Works

### ProductCard

1. **Wrapper**: `src/components/shared/ProductCard/index.jsx` - Automatically loads the correct layout's ProductCard
2. **Layout-specific**: Each layout has its own ProductCard in `src/themes/layout-{number}/components/ProductCard/`
3. **Usage**: Import as usual - the wrapper handles routing to the correct layout

```javascript
// This automatically uses the correct layout's ProductCard
import ProductCard from "@/components/shared/ProductCard";

<ProductCard product={product} />;
```

### Homepage

1. **Wrapper**: `src/pages/home/index.jsx` - Automatically loads the correct layout's Homepage
2. **Layout-specific**: Each layout has its own Homepage in `src/themes/layout-{number}/pages/Home.jsx`
3. **Route**: `/` → `src/pages/index.jsx` → `src/pages/home/index.jsx` → Layout-specific Homepage

### Product Page

1. **Wrapper**: `src/pages/product/[id].jsx` - Automatically loads the correct layout's Product Page
2. **Layout-specific**: Each layout has its own Product Page in `src/themes/layout-{number}/pages/Product.jsx`
3. **Route**: `/product/[id]` → `src/pages/product/[id].jsx` → Layout-specific Product Page

## Adding a New Layout

When creating a new layout (e.g., layout-2):

### 1. Create ProductCard

```javascript
// src/themes/layout-2/components/ProductCard/index.jsx
export default function ProductCard({ product }) {
  // Your custom ProductCard design for layout-2
  return <div className="custom-product-card">{/* Your UI */}</div>;
}
```

### 2. Create Homepage

```javascript
// src/themes/layout-2/pages/Home.jsx
export default function Home() {
  return <main>{/* Your custom homepage design for layout-2 */}</main>;
}
```

### 3. Create Product Page

```javascript
// src/themes/layout-2/pages/Product.jsx
export default function ProductPage() {
  const { product } = useProduct();

  return <main>{/* Your custom product page design for layout-2 */}</main>;
}
```

### 4. Update Wrappers

Update the wrapper files to include your new layout:

**ProductCard wrapper:**

```javascript
// src/components/shared/ProductCard/index.jsx
import Layout2ProductCard from "@/themes/layout-2/components/ProductCard";

const ProductCardComponent = useMemo(() => {
  switch (layout) {
    case 1:
      return Layout1ProductCard;
    case 2:
      return Layout2ProductCard; // Add this
    default:
      return Layout1ProductCard;
  }
}, [layout]);
```

**Homepage wrapper:**

```javascript
// src/pages/home/index.jsx
import Layout2Home from "@/themes/layout-2/pages/Home";

const HomePageComponent = useMemo(() => {
  switch (layout) {
    case 1:
      return Layout1Home;
    case 2:
      return Layout2Home; // Add this
    default:
      return Layout1Home;
  }
}, [layout]);
```

**Product Page wrapper:**

```javascript
// src/pages/product/[id].jsx
import Layout2Product from "@/themes/layout-2/pages/Product";

const ProductPageComponent = useMemo(() => {
  switch (layout) {
    case 1:
      return Layout1Product;
    case 2:
      return Layout2Product; // Add this
    default:
      return Layout1Product;
  }
}, [layout]);
```

## Best Practices

1. **Consistent Interface**: All layout-specific components should accept the same props
2. **Shared Logic**: Put shared logic in `src/features/` or `src/lib/`
3. **Layout-Specific Styling**: Keep layout-specific styling within layout folders
4. **Test Each Layout**: Ensure each layout's components work independently

## Component Interfaces

### ProductCard

```typescript
interface ProductCardProps {
  product: {
    id?: number;
    entityId?: number;
    productId?: number;
    name: string;
    thumbNail: string;
    price: number;
    specialPrice?: number;
    formattedPrice?: string;
    formatedSpecialPrice?: string;
    formattedFinalPrice?: string;
    discount?: number;
    rating?: number;
    reviewsCount?: number;
    typeId?: string;
    configurableData?: any;
    // ... other product fields
  };
}
```

### Homepage

No props required - should fetch its own data using hooks.

### Product Page

No props required - gets product ID from router and fetches data using hooks.

## Notes

- All wrappers automatically use the layout number from the API (via `useLayout()` hook)
- Components fallback to layout-1 if a layout is not found
- Wrappers are transparent to consumers - import and use as normal
- Each layout can have completely different UI/UX while sharing the same data structure