import { Switch } from '@primitivekit/react';

<Switch label="Enable notifications" />

<Switch size="small" label="Small" />
<Switch size="medium" label="Medium" />
<Switch size="large" label="Large" />

<Switch colorScheme="primary" label="Primary" />
<Switch colorScheme="secondary" label="Secondary" />
<Switch colorScheme="success" label="Success" />
<Switch colorScheme="danger" label="Danger" />

// On
<Switch checked label="Enabled" />

// Off
<Switch checked={false} label="Disabled" />

// Disabled
<Switch disabled label="Disabled switch" />

// Disabled & On
<Switch disabled checked label="Disabled & On" />

import { useState } from 'react';

function ControlledSwitch() {
  const [enabled, setEnabled] = useState(false);

  return (
    <Switch
      checked={enabled}
      onChange={(e) => setEnabled(e.target.checked)}
      label="Enable dark mode"
    />
  );
}

<Switch 
  label="Marketing emails"
  description="Receive emails about new products and features"
/>

<Switch
  label="Custom switch"
  style={{
    '--switch-width': '60px',
    '--switch-height': '32px',
    '--switch-bg-color': 'rgba(200, 200, 200, 1)',
    '--switch-bg-color-checked': 'rgba(0, 200, 0, 1)',
    '--switch-thumb-size': '28px',
    '--switch-border-radius': '16px',
  }}
/>

function SettingsPanel() {
  const [settings, setSettings] = useState({
    notifications: true,
    darkMode: false,
    autoSave: true,
  });

  return (
    <div>
      <Switch
        checked={settings.notifications}
        onChange={(e) => setSettings({
          ...settings,
          notifications: e.target.checked
        })}
        label="Push Notifications"
        description="Receive push notifications on your device"
      />
      
      <Switch
        checked={settings.darkMode}
        onChange={(e) => setSettings({
          ...settings,
          darkMode: e.target.checked
        })}
        label="Dark Mode"
        description="Use dark theme across the app"
      />
      
      <Switch
        checked={settings.autoSave}
        onChange={(e) => setSettings({
          ...settings,
          autoSave: e.target.checked
        })}
        label="Auto Save"
        description="Automatically save your work"
      />
    </div>
  );
}