import { ComponentExample } from "@/components/ComponentExample";

# Card

A container component for grouping related content with consistent styling.

## Features

- **Clickable**: Optional onClick handler for interactive cards
- **Consistent styling**: Border, shadow, and padding
- **Hover effects**: Visual feedback on clickable cards
- **Flexible content**: Accepts any children

## Basic Usage

```tsx
import { Card } from "@cv/ui";

function MyCard() {
  return (
    <Card>
      <h3>Card Title</h3>
      <p>Card content goes here</p>
    </Card>
  );
}
```

<ComponentExample className="my-4">
  <div className="p-4 bg-ctp-base border border-ctp-surface0 rounded-lg">
    <h3 className="text-lg font-semibold mb-2">Card Title</h3>
    <p className="text-ctp-text">Card content goes here</p>
  </div>
</ComponentExample>

## Clickable Card

```tsx
<Card onClick={() => {}}>
  <h3>Clickable Card</h3>
  <p>This card has a click handler</p>
</Card>
```

## Custom Styling

```tsx
<Card className="bg-ctp-mantle border-ctp-blue">
  <p>Custom styled card</p>
</Card>
```

## Props

| Prop        | Type              | Default      | Description            |
| ----------- | ----------------- | ------------ | ---------------------- |
| `children`  | `React.ReactNode` | **required** | Card content           |
| `className` | `string`          | `""`         | Additional CSS classes |
| `onClick`   | `() => void`      | `undefined`  | Optional click handler |

## Styling

Default styling:

- Border: `ctp-surface1`
- Background: `ctp-surface0`
- Padding: `p-4`
- Border radius: `rounded-lg`
- Shadow: `shadow-sm` (increases to `shadow-md` on hover if clickable)