# Reusable Metric Card Component Prompt

Create a reusable `MetricCard` for `<target feature or shared location>`.
Inspect the existing `Card`, `Badge`, `Skeleton`, typography, and dashboard
patterns before implementation.

## React contract

- Props: `title`, `value`, optional `unit`, `trend`, `status`, `description`,
  `icon`, `isLoading`, `onClick`, and `className`.
- Keep value types display-friendly: `<string | number | domain formatter>`.
- Make the whole card interactive only when `onClick` is provided.
- Prefer composition for optional footer or chart content:
  `<children or footer slot requirements>`.
- Forward the root element ref and extend suitable native element attributes.

## Styling theme: operational signal

- Use a calm `bg-card` surface with a thin `border-border` outline.
- The metric value is the strongest element; title and timestamp are quieter.
- Use tabular or mono numerals only when consistent with the target dashboard.
- Status is communicated by text/icon plus color, never color alone.
- A narrow accent, badge, or icon may show health without flooding the card with
  color.
- Hover elevation appears only for interactive cards.
- Loading skeletons preserve the final card dimensions.

## Responsive behavior

- Minimum usable width: `<for example 220px>`.
- Value and unit must not overlap.
- Long titles truncate or wrap to two lines.
- Footer content stacks below the metric on narrow screens.

## Acceptance criteria

1. The card works with partial data and has a clear unavailable state.
2. Loading, healthy, warning, critical, and neutral presentations are defined.
3. An interactive card supports mouse, Enter, and Space with visible focus.
4. The public API contains no API calls, routing, or feature-specific auth.
5. Light and dark themes use semantic tokens.

Run focused linting allowed by the repository instructions and finish with a
simple **TL;DR**.