import { LanguageSelector } from '@/components/locale/LanguageSelector'

<LanguageSelector />

// Basic usage
<LanguageSelector />

// In a form
<fieldset className="fieldset">
  <label className="label">
    <span className="label-text">Language</span>
  </label>
  <LanguageSelector />
</fieldset>

// In settings card
<div className="card bg-base-100 shadow-xl">
  <div className="card-body">
    <h2 className="card-title">Language Settings</h2>
    <fieldset className="fieldset">
      <label className="label">
        <span className="label-text">Preferred Language</span>
      </label>
      <LanguageSelector />
    </fieldset>
    <p className="text-sm opacity-60 mt-2">
      Select your preferred language. The page will reload to apply changes.
    </p>
  </div>
</div>

export const siteConfig = {
  locale: {
    default: 'en',
    supported: [
      { value: 'en', label: 'English', nativeName: 'English' },
      { value: 'zh', label: 'Chinese', nativeName: '简体中文' },
      { value: 'es', label: 'Spanish', nativeName: 'Español' },
      { value: 'fr', label: 'French', nativeName: 'Français' },
    ],
  },
}

import { ThemeSelector } from '@/components/theme/ThemeSelector'

<ThemeSelector />

// Basic usage
<ThemeSelector />

// In a form
<fieldset className="fieldset">
  <label className="label">
    <span className="label-text">Theme</span>
  </label>
  <ThemeSelector />
</fieldset>

// In settings card
<div className="card bg-base-100 shadow-xl">
  <div className="card-body">
    <h2 className="card-title">Appearance Settings</h2>
    <fieldset className="fieldset">
      <label className="label">
        <span className="label-text">Theme</span>
      </label>
      <ThemeSelector />
    </fieldset>
    <p className="text-sm opacity-60 mt-2">
      Choose your preferred theme. Changes will be applied immediately.
    </p>
  </div>
</div>

export const siteConfig = {
  theme: {
    default: 'system', // 'light', 'dark', or 'system'
    lightTheme: 'corporate',
    darkTheme: 'business',
  },
}

import { LanguageSelector } from '@/components/locale/LanguageSelector'
import { ThemeSelector } from '@/components/theme/ThemeSelector'
import { Card } from '@/components/ui/Card'
import { Button } from '@/components/ui/Button'
import { Input } from '@/components/ui/Input'

export function SettingsPage() {
  return (
    <div className="max-w-4xl mx-auto space-y-6 p-6">
      <h1 className="text-3xl font-bold">Settings</h1>
      
      {/* Profile Settings */}
      <Card title="Profile">
        <div className="space-y-4">
          <Input label="Name" defaultValue="John Doe" />
          <Input label="Email" type="email" defaultValue="john@example.com" />
          <Button>Save Changes</Button>
        </div>
      </Card>
      
      {/* Appearance Settings */}
      <Card title="Appearance">
        <div className="space-y-4">
          <fieldset className="fieldset">
            <label className="label">
              <span className="label-text">Theme</span>
            </label>
            <ThemeSelector />
            <label className="label">
              <span className="label-text-alt">
                Choose your preferred color theme
              </span>
            </label>
          </fieldset>
        </div>
      </Card>
      
      {/* Language Settings */}
      <Card title="Language">
        <div className="space-y-4">
          <fieldset className="fieldset">
            <label className="label">
              <span className="label-text">Preferred Language</span>
            </label>
            <LanguageSelector />
            <label className="label">
              <span className="label-text-alt">
                The page will reload when you change the language
              </span>
            </label>
          </fieldset>
        </div>
      </Card>
      
      {/* Notification Settings */}
      <Card title="Notifications">
        <div className="space-y-4">
          <fieldset className="fieldset">
            <label className="label cursor-pointer">
              <span className="label-text">Email notifications</span>
              <input type="checkbox" className="toggle" defaultChecked />
            </label>
          </fieldset>
          <fieldset className="fieldset">
            <label className="label cursor-pointer">
              <span className="label-text">Push notifications</span>
              <input type="checkbox" className="toggle" />
            </label>
          </fieldset>
          <Button>Save Preferences</Button>
        </div>
      </Card>
    </div>
  )
}

import { useState, useEffect } from 'react'
import { useLocale } from 'next-intl'

export function useUserPreferences() {
  const locale = useLocale()
  const [theme, setTheme] = useState('system')
  
  useEffect(() => {
    const savedTheme = localStorage.getItem('theme')
    if (savedTheme) setTheme(savedTheme)
  }, [])
  
  const updateTheme = (newTheme: string) => {
    setTheme(newTheme)
    localStorage.setItem('theme', newTheme)
    document.documentElement.setAttribute('data-theme', newTheme)
  }
  
  return {
    locale,
    theme,
    updateTheme,
  }
}

// Usage
export function Component() {
  const { locale, theme, updateTheme } = useUserPreferences()
  
  return (
    <div>
      <p>Current locale: {locale}</p>
      <p>Current theme: {theme}</p>
      <button onClick={() => updateTheme('dark')}>Dark Mode</button>
    </div>
  )
}