# XWUIPodcastEpisodeCard

A single podcast episode card: cover artwork, an optional category tag, the episode title (two-line clamp so a grid stays on a shared baseline), the host/creator byline, and a clock-icon duration caption. `conf_comp.variant` switches between `grid` (vertical poster tile, artwork ratio from `aspectRatio`) and `list` (horizontal row with a fixed 72px square thumb). The whole card is a `<button>`; clicking it fires `data.onClick(id)`, any handler registered through `onClick()`, and the bubbling `xwui-podcast-episode-card:click` DOM event with `{ id, title }`.

Composes **XWUIChip** for the category tag (`size: 'xs'`, `variant: 'default'`) instead of introducing another tag primitive. Duration is formatted `m:ss` / `h:mm:ss` by `formatEpisodeDuration()`, matching `XWUIAudioPlayer.formatTime()`; pass `data.durationLabel` to bypass formatting entirely.

## Basic Usage

```ts
import { XWUIPodcastEpisodeCard } from '@exonware/xwui/industry/podcast';

new XWUIPodcastEpisodeCard(document.getElementById('app')!, {
    id: 'ep-142',
    title: 'Shipping design systems at scale',
    hostName: 'Mara Whitfield',
    category: 'Design',
    durationSec: 2735,
    thumbnailUrl: '/covers/ep-142.jpg',
    onClick: (id) => router.push(`/episodes/${id}`),
});
```

## List Variant

```ts
new XWUIPodcastEpisodeCard(host, {
    title: 'The economics of independent podcasting',
    hostName: 'Dev Raman',
    category: 'Business',
    durationSec: 4120,
}, { variant: 'list' });
```

## Declarative

```html
<xwui-podcast-episode-card
    title="Field recording on a budget"
    hostName="Ines Duarte"
    category="Audio"
    durationSec="1490"
    variant="list"></xwui-podcast-episode-card>
```