import { SpinnerSizesDemo } from "../../../src/components/spinner-sizes-demo";
import { SpinnerWithTextDemo } from "../../../src/components/spinner-with-text-demo";
import { SpinnerLoadingDemo } from "../../../src/components/spinner-loading-demo";

## Overview

The Spinner component provides an animated loading indicator to show users that content is being loaded or an action is being processed. It includes proper ARIA attributes for screen readers and supports three size variants.

## Import

```tsx
import { Spinner } from "@px-ui/core";
```

## Usage

<Preview>
  <SpinnerSizesDemo />
</Preview>

<CodeBlock>
  ```tsx
  <Spinner size="small" />
  <Spinner size="medium" />
  <Spinner size="large" />
  ```
</CodeBlock>

## Examples

### With Text

Combine the Spinner with text labels to provide context about what's loading.

<Preview>
  <SpinnerWithTextDemo />
</Preview>

<CodeBlock>
  ```tsx
  <div className="flex items-center gap-2">
    <Spinner size="small" />
    <span>Loading...</span>
  </div>

  <div className="flex items-center gap-2">
    <Spinner size="medium" />
    <span>Processing your request...</span>
  </div>

  <div className="flex items-center gap-3">
    <Spinner size="large" />
    <span>Please wait</span>
  </div>
  ```
</CodeBlock>

### Loading States

Use the Spinner in common loading state scenarios like content areas and button loading states.

<Preview>
  <SpinnerLoadingDemo />
</Preview>

<CodeBlock>
  ```tsx
  <div className="flex items-center justify-center p-8">
    <div className="flex flex-col items-center gap-3">
      <Spinner size="medium" />
      <span>Loading content...</span>
    </div>
  </div>

  <Button disabled>
    <Spinner size="small" />
    Loading...
  </Button>
  ```
</CodeBlock>

## API Reference

### Spinner

An animated loading indicator with size customization and accessibility support.

| Prop        | Type                             | Default   | Description                                                  |
| ----------- | -------------------------------- | --------- | ------------------------------------------------------------ |
| `size`      | `"small" \| "medium" \| "large"` | `"small"` | Size of the spinner (small: 16px, medium: 24px, large: 32px) |
| `className` | `string`                         | -         | Additional CSS classes                                       |

**Accessibility:** The Spinner includes `role="status"` and `aria-label="Loading"` for screen reader support.