# Card

## Overview

Composable container with header, content, footer, and optional action area. Supports size variants that control internal padding and spacing.

---

## Props

### Card (Root)

| Prop        | Type              | Default      | Description                              |
| ----------- | ----------------- | ------------ | ---------------------------------------- | ------- | ----------- | -------------------------------------- |
| `size`      | `"default"        | "sm"         | "lg"                                     | "none"` | `"default"` | Controls internal padding and spacing. |
| `className` | `string`          | `""`         | Additional classes for layout and width. |
| `children`  | `React.ReactNode` | **required** | Compose with subcomponents below.        |

### Subcomponents

- `CardHeader`: Top section, usually with `CardTitle`, `CardDescription`, and optional `CardAction`.
- `CardTitle`: Title text area.
- `CardDescription`: Secondary text under the title.
- `CardAction`: Right-aligned area inside the header for buttons/menus.
- `CardContent`: Main content area.
- `CardFooter`: Bottom area for actions or summaries.

---

## Behavior

- **Size variants**: `sm`, `default`, `lg`, `none` change vertical padding and gaps.
- **Header/Footer borders**: Apply border utilities on header/footer to create separators.
- **Layout**: Use `className` for width and responsive behavior.

---

## Examples

### Basic

```tsx
import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  CardFooter,
} from "laif-ds";
import { Button } from "laif-ds";

export function BasicCard() {
  return (
    <Card className="w-[350px]">
      <CardHeader>
        <CardTitle>Card Title</CardTitle>
        <CardDescription>Card description goes here</CardDescription>
      </CardHeader>
      <CardContent>
        <p>
          This is the main content of the card. You can put any content here.
        </p>
      </CardContent>
      <CardFooter>
        <Button>Action</Button>
      </CardFooter>
    </Card>
  );
}
```

### With Action

```tsx
import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardAction,
  CardContent,
} from "laif-ds";
import { Button } from "laif-ds";

export function CardWithAction() {
  return (
    <Card className="w-[350px]">
      <CardHeader>
        <CardTitle>Card with Action</CardTitle>
        <CardDescription>
          Card with an action button in the header
        </CardDescription>
        <CardAction>
          <Button variant="ghost" size="icon">
            ⋯
          </Button>
        </CardAction>
      </CardHeader>
      <CardContent>
        <p>This card has an action button in the top right corner.</p>
      </CardContent>
    </Card>
  );
}
```

### Size Variants

```tsx
import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
} from "laif-ds";

export function SizeVariants() {
  return (
    <div className="flex flex-col gap-8">
      <Card size="sm" className="w-[350px]">
        <CardHeader>
          <CardTitle>Size: Small</CardTitle>
          <CardDescription>Reduced padding (sm)</CardDescription>
        </CardHeader>
        <CardContent>
          <p>This card uses size="sm".</p>
        </CardContent>
      </Card>

      <Card size="default" className="w-[350px]">
        <CardHeader>
          <CardTitle>Size: Default</CardTitle>
          <CardDescription>Standard padding (default)</CardDescription>
        </CardHeader>
        <CardContent>
          <p>This card uses size="default".</p>
        </CardContent>
      </Card>

      <Card size="lg" className="w-[350px]">
        <CardHeader>
          <CardTitle>Size: Large</CardTitle>
          <CardDescription>Spacious padding (lg)</CardDescription>
        </CardHeader>
        <CardContent>
          <p>This card uses size="lg".</p>
        </CardContent>
      </Card>

      <Card size="none" className="w-[350px]">
        <CardHeader className="border-d-border border-b p-4">
          <CardTitle>Size: None</CardTitle>
          <CardDescription>No default padding (none)</CardDescription>
        </CardHeader>
        <CardContent className="p-4">
          <p>This card uses size="none" with custom padding.</p>
        </CardContent>
      </Card>
    </div>
  );
}
```

---

## Notes

- **Composability**: Use only the subcomponents you need.
- **Borders**: Add `border-b`/`border-t` to header/footer for separation.
- **Action area**: `CardAction` aligns content to the top-right in the header.