---
import type { SlFormatNumber } from '@shoelace-style/shoelace';

interface Props extends Omit<SlFormatNumber, any> {
    /** The number to format. */
    value: number;
    /** The formatting style to use. */
    type?: 'currency' | 'decimal' | 'percent';
    /** Turns off grouping separators. */
    noGrouping?: boolean;
    /** The [ISO 4217](https://en.wikipedia.org/wiki/ISO_4217) currency code to use when formatting. */
    currency?: string;
    /** How to display the currency. */
    currencyDisplay?: 'symbol' | 'narrowSymbol' | 'code' | 'name';
    /** The minimum number of integer digits to use. Possible values are 1-21. */
    minimumIntegerDigits?: number;
    /** The minimum number of fraction digits to use. Possible values are 0-20. */
    minimumFractionDigits?: number;
    /** The maximum number of fraction digits to use. Possible values are 0-0. */
    maximumFractionDigits?: number;
    /** The minimum number of significant digits to use. Possible values are 1-21. */
    minimumSignificantDigits?: number;
    /** The maximum number of significant digits to use,. Possible values are 1-21. */
    maximumSignificantDigits?: number;
    /** @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/lang */
    lang?: string;
}

const { currency, currencyDisplay, maximumFractionDigits, maximumSignificantDigits, minimumFractionDigits, minimumIntegerDigits, minimumSignificantDigits, noGrouping, type, value, lang, ...rest } = Astro.props;
---

<sl-format-number
    {currency}
    {currencyDisplay}
    {maximumFractionDigits}
    {maximumSignificantDigits}
    {minimumFractionDigits}
    {minimumIntegerDigits}
    {minimumSignificantDigits}
    {noGrouping}
    {type}
    {value}
    {lang}
    {...rest}
    >
</sl-format-number>

<script>
    import '@shoelace-style/shoelace/dist/components/format-number/format-number.js';
</script>