import { Story, Meta, html } from '@open-wc/demoing-storybook';
import { render } from '@lion/core';
import { localize, formatNumber, formatDate } from '../index.js';

<Meta title="Localize/Translate Text" />

<Story name="Function"></Story>

# Translate Text

Is meant to translate text into multiple languages.
In it's simplest form it is a function that returns the translated text for a `namespace` + `key`.

<Story id="localize-system-internals--as-function" />

```js
localize.msg('lit-html-example:body'); // for en-GB: I am from England
localize.msg('lit-html-example:body'); // for nl-NL: Ik kom uit Nederland
// ...
```

## Web Component

<Story name="Web component"></Story>

For use in a web component we have `LocalizeMixin` that lets you define namespaces and awaits loading of those translations.

<Story id="localize-system-internals--web-component" />

```js
class MessageExample extends LocalizeMixin(LitElement) {
  render() {
    return html`
      <div aria-live="polite">
        <p>${localize.msg('lit-html-example:body')}</p>
      </div>
    `;
  }
}
```

For a full overview of all the features, please checkout the [Localize System Overview](?path=/docs/localize-system-overview--page).