# GameCard

A cross-platform React card component for displaying game promotions with customizable tags, images, and action buttons. Perfect for game catalogs, reward systems, and promotional content.

## Installation

```bash
npm install @xsolla/xui-game-card
```

## Demo

### Basic GameCard

```tsx
import * as React from "react";
import { GameCard } from "@xsolla/xui-game-card";

export default function BasicGameCard() {
  return (
    <GameCard
      image="https://example.com/game.jpg"
      title="Whiteout Survival"
      subtitle="Strategy • Puzzle • Building"
      buttonText="Play"
    />
  );
}
```

### GameCard with Tags

```tsx
import * as React from "react";
import { GameCard } from "@xsolla/xui-game-card";
import { Tag } from "@xsolla/xui-tag";
import { XsollaTicket, XsollaPoint } from "@xsolla/xui-icons-currency";

export default function GameCardWithTags() {
  return (
    <GameCard
      image="https://example.com/game.jpg"
      title="Whiteout Survival"
      subtitle="Strategy • Puzzle • Building"
      tagsTopLeft={
        <>
          <Tag size="sm" tone="brand" icon={<XsollaPoint />}>
            250
          </Tag>
          <Tag size="sm" tone="secondary" icon={<XsollaTicket />}>
            5x
          </Tag>
        </>
      }
      tagsTopRight={
        <Tag size="sm" tone="secondary">
          10h left
        </Tag>
      }
      buttonText="Activate"
    />
  );
}
```

### GameCard with Custom Trailing

```tsx
import * as React from "react";
import { GameCard } from "@xsolla/xui-game-card";
import { Button } from "@xsolla/xui-button";
import { Badge } from "@xsolla/xui-badge";

export default function GameCardCustomTrailing() {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
      {/* Custom Button */}
      <GameCard
        image="https://example.com/game.jpg"
        title="Epic Adventure"
        subtitle="RPG • Action"
        trailing={
          <Button size="xs" tone="brand">
            Play Now
          </Button>
        }
      />

      {/* Price Display */}
      <GameCard
        image="https://example.com/game.jpg"
        title="Premium Bundle"
        subtitle="Action • Adventure"
        trailing={
          <div style={{ textAlign: "right" }}>
            <div style={{ fontSize: 14, fontWeight: 600 }}>$29.99</div>
            <div
              style={{
                fontSize: 11,
                textDecoration: "line-through",
                opacity: 0.6,
              }}
            >
              $49.99
            </div>
          </div>
        }
      />

      {/* Badge */}
      <GameCard
        image="https://example.com/game.jpg"
        title="Free to Play"
        subtitle="Casual • Puzzle"
        trailing={
          <Badge size="xl" tone="success">
            FREE
          </Badge>
        }
      />
    </div>
  );
}
```

### GameCard Sizes

```tsx
import * as React from "react";
import { GameCard } from "@xsolla/xui-game-card";

export default function GameCardSizes() {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 24 }}>
      <div style={{ maxWidth: 366 }}>
        <p>Large (lg)</p>
        <GameCard
          image="https://example.com/game.jpg"
          title="Game Title"
          subtitle="Genre"
          size="lg"
          buttonText="Play"
        />
      </div>
      <div style={{ maxWidth: 280 }}>
        <p>Medium (md)</p>
        <GameCard
          image="https://example.com/game.jpg"
          title="Game Title"
          subtitle="Genre"
          size="md"
          buttonText="Play"
        />
      </div>
      <div style={{ maxWidth: 200 }}>
        <p>Small (sm)</p>
        <GameCard
          image="https://example.com/game.jpg"
          title="Game Title"
          subtitle="Genre"
          size="sm"
          buttonText="Play"
        />
      </div>
    </div>
  );
}
```

## Anatomy

Import the component and use it directly:

```jsx
import { GameCard } from "@xsolla/xui-game-card";

<GameCard
  image="..." // Required: Game artwork URL
  title="Game Title" // Required: Game name
  subtitle="Genre" // Optional: Categories/genre
  size="lg" // Size variant
  tagsTopLeft={<Tag />} // Custom top-left content
  tagsTopRight={<Tag />} // Custom top-right content
  trailing={<Button />} // Custom trailing content
  buttonText="Play" // Default button text (if no trailing)
  onButtonClick={() => {}} // Default button handler
  onPress={() => {}} // Card press handler
/>;
```

## API Reference

### GameCard

A card component for displaying game promotions.

**GameCard Props:**

| Prop          | Type                   | Default  | Description                                                                                                   |
| :------------ | :--------------------- | :------- | :------------------------------------------------------------------------------------------------------------ |
| `testID`      | `string`               | —        | Test ID for testing frameworks. On web this renders as `data-testid`; on React Native it renders as `testID`. |
| image         | `string`               | required | Game artwork image URL.                                                                                       |
| title         | `string`               | required | Game title.                                                                                                   |
| subtitle      | `string`               | -        | Game subtitle (e.g., genre tags).                                                                             |
| size          | `"lg" \| "md" \| "sm"` | `"lg"`   | Size variant of the card.                                                                                     |
| tagsTopLeft   | `ReactNode`            | -        | Custom content for top-left corner.                                                                           |
| tagsTopRight  | `ReactNode`            | -        | Custom content for top-right corner.                                                                          |
| trailing      | `ReactNode`            | -        | Custom trailing content (button, price, etc.).                                                                |
| buttonText    | `string`               | -        | Button label text (if trailing not provided).                                                                 |
| onButtonClick | `() => void`           | -        | Button click handler (if trailing not provided).                                                              |
| onPress       | `() => void`           | -        | Card click handler.                                                                                           |
| imageAlt      | `string`               | -        | Alt text for game image.                                                                                      |
| className     | `string`               | -        | Custom className for the container.                                                                           |

**Size Dimensions:**

| Size | Image Aspect Ratio | Reference Width |
| :--- | :----------------- | :-------------- |
| lg   | 366:206 (~16:9)    | 366px           |
| md   | 280:158 (~16:9)    | 280px           |
| sm   | 200:113 (~16:9)    | 200px           |

## Accessibility

- Uses semantic HTML structure
- Image includes alt text (defaults to title)
- Interactive elements are keyboard accessible
- Supports custom `onPress` for full card interaction