import { FormattedDate } from "@cv/ui";

# FormattedDate

A component for displaying formatted dates with customizable size and variant.

## Features

- **Date formatting**: Formats ISO date strings to readable format
- **Size variants**: Small, medium, and large text sizes
- **Style variants**: Default, muted, and subtle text colors
- **Tooltip**: Cursor help indicator for full date information
- **CVA variants**: Dynamic styling with Class Variance Authority

## Basic Usage

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

function MyComponent() {
  return <FormattedDate date="2025-01-15T10:30:00Z" />;
}
// Displays: "Jan 2025"
```

## Size Variants

### Small

```tsx
<FormattedDate date="2025-01-15" size="sm" />
```

### Medium (default)

```tsx
<FormattedDate date="2025-01-15" size="md" />
```

### Large

```tsx
<FormattedDate date="2025-01-15" size="lg" />
```

## Style Variants

### Default

```tsx
<FormattedDate date="2025-01-15" variant="default" />
// Uses: text-ctp-text
```

### Muted

```tsx
<FormattedDate date="2025-01-15" variant="muted" />
// Uses: text-ctp-subtext0
```

### Subtle

```tsx
<FormattedDate date="2025-01-15" variant="subtle" />
// Uses: text-ctp-subtext1
```

## Format

The component formats dates as "Month Year" (e.g., "Jan 2025") using `toLocaleDateString` with:

- Year: numeric
- Month: short

## Props

| Prop        | Type                               | Default      | Description               |
| ----------- | ---------------------------------- | ------------ | ------------------------- |
| `date`      | `string`                           | **required** | ISO date string to format |
| `size`      | `"sm" \| "md" \| "lg"`             | `"md"`       | Text size variant         |
| `variant`   | `"default" \| "muted" \| "subtle"` | `"default"`  | Text color variant        |
| `className` | `string`                           | `undefined`  | Additional CSS classes    |

## Styling

- **Cursor**: `cursor-help` (indicates tooltip on hover)
- **Size classes**: `text-sm`, `text-base`, `text-lg`
- **Color classes**: `text-ctp-text`, `text-ctp-subtext0`, `text-ctp-subtext1`