import {
  Canvas,
  Controls,
  Meta,
  Subtitle,
  Title,
} from '@storybook/addon-docs/blocks'
import * as CardStories from './Card.stories'
import { LifecycleTag, SourceLinks } from '../../docs/components'

<Meta of={CardStories} />

<Title>Card</Title>
<Subtitle>
  Surface container for grouping related content and actions about a single
  subject.
</Subtitle>
<SourceLinks
  links={[
    { label: 'shadcn/ui', href: 'https://ui.shadcn.com/docs/components/card' },
  ]}
/>
<LifecycleTag variant="Stable" />
**Component type:** Primitive

<Canvas of={CardStories.Default} sourceState="shown" />
<Controls of={CardStories.Default} />

## When to use

Use `Card` to visually group related content into a bordered, rounded surface. Cards are suitable for dashboards, settings panels, data summaries, and any content that benefits from clear visual separation from the page background.

## Import

```tsx
import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardAction,
  CardContent,
  CardFooter,
} from '@chainlink/blocks'
```

## Anatomy

```tsx
<Card>
  <CardHeader>
    <CardTitle>Card title</CardTitle>
    <CardDescription>Supporting description text.</CardDescription>
    <CardAction>
      <Button variant="secondary">Action</Button>
    </CardAction>
  </CardHeader>
  <CardContent>Main content goes here.</CardContent>
  <CardFooter>
    <Button>Primary action</Button>
  </CardFooter>
</Card>
```

## Subcomponents

- `Card`: Root surface container. Renders a bordered, rounded panel with a background.
- `CardHeader`: Top section. Lays out title, description, and action in a grid.
- `CardTitle`: Primary heading inside `CardHeader`. Renders an `<h3>`.
- `CardDescription`: Subtitle or supporting text inside `CardHeader`.
- `CardAction`: Slot for a button or link in the top-right of `CardHeader`.
- `CardContent`: Main body area below the header.
- `CardFooter`: Bottom section, typically used for primary actions.

## Examples

### No footer

<Canvas of={CardStories.NoFooter} sourceState="shown" />

### No action

<Canvas of={CardStories.NoAction} sourceState="shown" />

### Container only

<Canvas of={CardStories.ContainerOnly} sourceState="shown" />

### Interactive card

<Canvas of={CardStories.InteractiveCard} sourceState="shown" />