<!-- source-hash: a586fc7eef91717f42e06b54e7cb5290 -->
A React client component that renders a single onboarding step as an interactive card, supporting completed, skipped, pending, and loading states with appropriate actions.

## Key Components

### `OnboardingStepCard`
The primary exported component. Renders a responsive card with a title/description column and a dynamic action column based on step state.

**Props (`OnboardingStepCardProps`):**

| Prop | Type | Description |
|------|------|-------------|
| `step` | `object` | Step metadata including title, description, icons, action text, and callbacks |
| `isCompleted` | `boolean` | Shows a success badge and re-run action button |
| `isSkipped` | `boolean` | Shows a neutral "SKIPPED" badge |
| `isCheckingCompletion` | `boolean` | Renders animated skeleton placeholders |
| `onAction` | `() => void \| Promise<void>` | Primary action handler (async-safe) |
| `onSkip` | `() => void` | Skip step handler |
| `className` | `string?` | Optional additional CSS classes |

**Internal state:**
- `isProcessing` — Tracks in-flight async action calls to disable the button and prevent double-submission.

## Usage Example

```typescript
<OnboardingStepCard
  step={{
    id: 'connect-psa',
    title: 'Connect your PSA',
    description: 'Link your ticketing system to get started',
    actionIcon: (color) => <PlugIcon color={color} />,
    actionText: 'Connect Now',
    completedText: 'Reconnect',
    onAction: () => router.push('/integrations/psa'),
    onSkip: () => console.log('skipped'),
  }}
  isCompleted={false}
  isSkipped={false}
  isCheckingCompletion={false}
  onAction={() => router.push('/integrations/psa')}
  onSkip={() => markStepSkipped('connect-psa')}
/>
```