import React from 'react';
import i18n from 'ui-i18n';
import Link from '@mui/material/Link';
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
import { useStyles } from './styles';
export var ShowMore = function (_a) {
    var moreNumber = _a.moreNumber, valueNumber = _a.valueNumber, onClick = _a.onClick;
    var styles = useStyles();
    return (React.createElement(Link, { "data-reltio-id": "show-more", component: "button", variant: "caption", className: styles.link, onClick: onClick, underline: "none" },
        React.createElement(KeyboardArrowDownIcon, { className: styles.icon }),
        moreNumber && valueNumber
            ? i18n.text('Show ${moreNumber} more of remaining ${valueNumber} value', { moreNumber: moreNumber, valueNumber: valueNumber })
            : i18n.text('Show more')));
};
