<!-- source-hash: 871aa5b6b708ec48977c99b3cc86ea5f -->
A reusable card component for displaying structured key-value information with optional title, subtitle, progress bar, and clipboard copy support.

## Key Components

- **`InfoCard`** — Main exported component that renders a styled card with title, subtitle, info items, and an optional progress bar
- **`InfoCardValueRow`** — Internal component rendering a single label/value row with a divider and optional copy-to-clipboard button
- **`InfoCardData`** — Interface defining the card's data shape including items, optional progress config, and display metadata
- **`InfoCardProps`** — Component props interface accepting `data` and an optional `className`

## Usage Example

```typescript
import { InfoCard } from './info-card'

// Basic usage with copyable values and progress bar
<InfoCard
  data={{
    title: "Server Details",
    subtitle: "Production Node",
    icon: <ServerIcon />,
    items: [
      { label: "IP Address", value: "192.168.1.100", copyable: true },
      { label: "Tags", value: ["web", "prod"], copyable: false },
    ],
    progress: {
      value: 85,
      warningThreshold: 70,
      criticalThreshold: 90,
      inverted: false,
    },
  }}
  className="max-w-sm"
/>
```

## Notes

- Multi-value items (arrays) render each value as a separate row, with the label shown only on the first row
- The progress bar supports `inverted` mode where high values are treated as healthy (green) and low values as critical (red)
- Copy state resets automatically via the `useCopyToClipboard` hook, toggling between a copy and check icon