# Quickstart: Multi-Language Support

## Adding a New Translation

1. Open `src/i18n/types.ts` and add the key to the `Translations` interface
2. Add the English value in `src/i18n/en.ts`
3. Add the Ukrainian value in `src/i18n/uk.ts`
4. TypeScript will error if any file is missing the new key

## Using Translations in a Component

```typescript
import { useTranslation } from '../i18n';

function MyComponent() {
  const { t, lang } = useTranslation();
  return <h1>{t('my.section.title')}</h1>;
}
```

## Formatting Dates by Locale

```typescript
const { lang } = useTranslation();
const locale = lang === 'uk' ? 'uk-UA' : 'en-GB';
const formatted = new Date(dateStr).toLocaleDateString(locale, {
  year: 'numeric', month: 'long', day: 'numeric'
});
```

## Adding a New Language (Future)

1. Add the new code to the `Lang` type in `types.ts`
2. Create a new translation file (e.g., `de.ts`) satisfying `Translations`
3. Register it in `LanguageContext.tsx` translations map
4. Add the language option to the Header toggle