import {
  Canvas,
  Controls,
  Meta,
  Title,
  Subtitle,
} from '@storybook/addon-docs/blocks'
import * as ThemeToggleStories from './ThemeToggle.stories'
import { LifecycleTag } from '../../docs/components'

<Meta of={ThemeToggleStories} />

<Title>ThemeToggle</Title>
<Subtitle>
  A compact toggle component for switching between light, dark, and system
  themes.
</Subtitle>
<LifecycleTag variant="Stable" />

<Canvas of={ThemeToggleStories.Default} sourceState="shown" />
<Controls />

## Overview

The `ThemeToggle` component provides a user-friendly way to switch between three theme modes:

- **System** - Follows the user's operating system preference
- **Light** - Forces light mode
- **Dark** - Forces dark mode

This component is designed to work seamlessly with `next-themes` and can be placed inside a `SidebarFooter` for easy access.

## Import

```tsx
import { ThemeToggle } from '@chainlink/blocks'
```

## Usage

```tsx
import { useTheme } from 'next-themes'
import { ThemeToggle } from '@chainlink/blocks'

export function MyComponent() {
  const { theme, setTheme } = useTheme()

  return <ThemeToggle darkModeToggle={{ theme, setTheme }} />
}
```

## Usage with Sidebar

The `ThemeToggle` is typically placed in the `SidebarFooter`:

```tsx
import { useTheme } from 'next-themes'
import { Sidebar, SidebarFooter, ThemeToggle } from '@chainlink/blocks'

export function AppSidebar() {
  const { theme, setTheme } = useTheme()

  return (
    <Sidebar>
      {/* ... other sidebar content ... */}
      <SidebarFooter>
        <ThemeToggle darkModeToggle={{ theme, setTheme }} />
      </SidebarFooter>
    </Sidebar>
  )
}
```

## Examples

### Light Theme Selected

<Canvas of={ThemeToggleStories.LightSelected} sourceState="shown" />

### Dark Theme Selected

<Canvas of={ThemeToggleStories.DarkSelected} sourceState="shown" />

### Inside a Sidebar

<Canvas of={ThemeToggleStories.InsideSidebar} sourceState="shown" />

## Related

- [Dark Mode](?path=/docs/theme-dark-mode--docs) - Learn how to implement dark mode in your application