/** @jsx jsx */
import { jsx, css } from "@emotion/core";
import mqs from "components/mqs";

export default ({ tag: Tag, children, fontSizes, extraCss }) => {
    const { xs, sm, md, lg, xl, xxl } = fontSizes;

    return (
        <Tag
            css={css`
                ${mqs([
                    {
                        size: "xs",
                        styles: `font-size: ${xs ? xs : 22}px;`,
                    },
                    {
                        size: "sm",
                        styles: `font-size: ${sm ? sm : 24}px;`,
                    },
                    {
                        size: "md",
                        styles: `font-size: ${md ? md : 26}px;`,
                    },
                    {
                        size: "lg",
                        styles: `font-size: ${lg ? lg : 32}px;`,
                    },
                    {
                        size: "xl",
                        styles: `font-size: ${xl ? xl : 34}px;`,
                    },
                    {
                        size: "xxl",
                        styles: `font-size: ${xxl ? xxl : 36}px;`,
                    },
                ])}
                ${extraCss}
            `}>
            {children}
        </Tag>
    );
};