<!-- source-hash: f987a6879214f07a120da4bd03335b15 -->
Reusable client-side status filter component that renders a row of toggle buttons for filtering content by status, following the admin dashboard pattern used across the Flamingo/OpenFrame platform.

## Key Components

### Interfaces

| Interface | Description |
|-----------|-------------|
| `StatusOption` | Defines a filter option with `value` and `label` strings |
| `StatusFilterComponentProps` | Full props contract for the component |

### Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `selectedStatus` | `string` | — | Currently active filter value |
| `onStatusChange` | `(status: string) => void` | — | Callback fired on filter selection |
| `statusOptions` | `StatusOption[]` | — | Array of filter options to render |
| `showCount` | `boolean` | `false` | Toggles item count display |
| `count` | `number` | `0` | Number shown when `showCount` is enabled |
| `className` | `string` | `''` | Additional CSS classes for the wrapper |

### Exported

- `StatusFilterComponent` — named export, main component
- `StatusOption` — exported interface
- `StatusFilterComponentProps` — exported interface

## Usage Example

```typescript
import { StatusFilterComponent, StatusOption } from './status-filter-component';

const ticketStatusOptions: StatusOption[] = [
  { value: 'open', label: 'Open' },
  { value: 'in_progress', label: 'In Progress' },
  { value: 'closed', label: 'Closed' },
];

export function TicketDashboard() {
  const [status, setStatus] = React.useState('all');

  return (
    <StatusFilterComponent
      selectedStatus={status}
      onStatusChange={setStatus}
      statusOptions={ticketStatusOptions}
      showCount
      count={42}
    />
  );
}
```

> **Note:** The `'all'` option is always rendered as a dedicated button — any `StatusOption` with `value: 'all'` in the input array is automatically excluded from the mapped list to prevent duplication.