import { useI18n } from '@/hooks/use-i18n'

function MyComponent() {
  const { t, locale, setLocale } = useI18n()

  return (
    <div>
      <h1>{t('app.name')}</h1>
      <button onClick={() => setLocale('es')}>
        Switch to Spanish
      </button>
    </div>
  )
}

const { t } = useI18n()

// Simple interpolation
t('notifications.newMessage', { sender: 'Alice' })
// → "New message from Alice"

// With count (pluralization)
t('time.minutes', { count: 5 })
// → "5 minutes"

import { useDateFormat } from '@/hooks/use-i18n'

function DateDisplay({ date }) {
  const { formatDate, formatRelativeTime } = useDateFormat()

  return (
    <div>
      {/* Full date */}
      <p>{formatDate(date, { dateStyle: 'full' })}</p>

      {/* Relative time */}
      <time>{formatRelativeTime(date)}</time>
    </div>
  )
}

import { useNumberFormat } from '@/hooks/use-i18n'

function PriceTag({ amount }) {
  const { formatCurrency, formatNumber, formatPercent } = useNumberFormat()

  return (
    <div>
      <p>{formatCurrency(amount, 'USD')}</p>
      <p>{formatNumber(1000000)}</p>
      <p>{formatPercent(0.15, 2)}</p>
    </div>
  )
}

import { useRTL } from '@/hooks/use-i18n'

function Layout({ children }) {
  const isRTL = useRTL()

  return (
    <div className={isRTL ? 'flex-row-reverse' : 'flex-row'}>
      {children}
    </div>
  )
}

import { useI18n } from '@/hooks/use-i18n'
import { LOCALE_CODES, getLocaleConfig } from '@/lib/i18n/locales'

function LanguageSwitcher() {
  const { locale, setLocale } = useI18n()

  return (
    <select value={locale} onChange={(e) => setLocale(e.target.value)}>
      {LOCALE_CODES.map((code) => {
        const config = getLocaleConfig(code)
        return (
          <option key={code} value={code}>
            {config?.flag} {config?.name}
          </option>
        )
      })}
    </select>
  )
}

// Navigation
t('nav.home') // "Home"
t('nav.chat') // "Chat"
t('nav.settings') // "Settings"

// Auth
t('auth.signIn') // "Sign In"
t('auth.signUp') // "Sign Up"
t('auth.logout') // "Logout"

// Common actions
t('common.save') // "Save"
t('common.cancel') // "Cancel"
t('common.delete') // "Delete"
t('common.edit') // "Edit"

// Chat
t('chat.newMessage') // "New Message"
t('chat.typeMessage') // "Type a message..."
t('chat.send') // "Send"

// Time
t('time.now') // "Now"
t('time.today') // "Today"
t('time.yesterday') // "Yesterday"

// Errors
t('errors.somethingWentWrong') // "Something went wrong"
t('errors.tryAgain') // "Try again"

const { t } = useI18n()
<h1>{t('myFeature.title')}</h1>

// Good ✅
<button>{t('common.save')}</button>

// Bad ❌
<button>Save</button>

// Check if key exists
const { t, i18n } = useI18n()
console.log(i18n.exists('my.key'))

// Check current language
console.log(i18n.language)

// Force reload
i18n.reloadResources()

// Check if RTL is detected
import { isRTL } from '@/lib/i18n/config'
console.log(isRTL())

// Check HTML attributes
console.log(document.documentElement.dir)
console.log(document.documentElement.lang)

// Check locale config
import { getLocaleConfig } from '@/lib/i18n/locales'
const config = getLocaleConfig('ar')
console.log(config.dateFnsLocale)
console.log(config.numberLocale)