"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Typography = void 0;
const react_1 = __importDefault(require("react"));
const Headline1_1 = require("./Headline1");
const Headline2_1 = require("./Headline2");
const Headline3_1 = require("./Headline3");
const Headline4_1 = require("./Headline4");
const Headline5_1 = require("./Headline5");
const Headline6_1 = require("./Headline6");
const Title1_1 = require("./Title1");
const Title2_1 = require("./Title2");
const Title3_1 = require("./Title3");
const Title4_1 = require("./Title4");
const Body1_1 = require("./Body1");
const Body2_1 = require("./Body2");
const CONTENT = '보통 사람을 위한\n보통이 아닌 금융\nExtraordinary\nFinance for the\nOrdinary';
const Component = ({ children }) => {
    const data = [
        {
            tag: 'H1',
            content: CONTENT,
            Typo: Headline1_1.Headline1,
        },
        {
            tag: 'H2',
            content: CONTENT,
            Typo: Headline2_1.Headline2,
        },
        {
            tag: 'H3',
            content: CONTENT,
            Typo: Headline3_1.Headline3,
        },
        {
            tag: 'H4',
            content: CONTENT,
            Typo: Headline4_1.Headline4,
        },
        {
            tag: 'H5',
            content: CONTENT,
            Typo: Headline5_1.Headline5,
        },
        {
            tag: 'H6',
            content: CONTENT,
            Typo: Headline6_1.Headline6,
        },
        {
            tag: 'T1',
            content: CONTENT,
            Typo: Title1_1.Title1,
        },
        {
            tag: 'T2',
            content: CONTENT,
            Typo: Title2_1.Title2,
        },
        {
            tag: 'T3',
            content: CONTENT,
            Typo: Title3_1.Title3,
        },
        {
            tag: 'T4',
            content: CONTENT,
            Typo: Title4_1.Title4,
        },
        {
            tag: 'B1',
            content: CONTENT,
            Typo: Body1_1.Body1,
        },
        {
            tag: 'B2',
            content: CONTENT,
            Typo: Body2_1.Body2,
        },
    ];
    return (react_1.default.createElement("table", { style: {
            borderCollapse: 'collapse',
        } }, data.map(({ tag, content, Typo }) => {
        return (react_1.default.createElement("tr", { key: tag, style: {
                border: '1px solid black',
            } },
            react_1.default.createElement("td", { style: {
                    border: '1px solid black',
                    textAlign: 'center',
                    width: 200,
                } },
                react_1.default.createElement(Typo, null, tag)),
            react_1.default.createElement("td", { style: {
                    border: '1px solid black',
                    textAlign: 'center',
                    width: 400,
                    padding: '15px 0',
                } },
                react_1.default.createElement(Typo, null, children || content))));
    })));
};
/**
 * updated 230523
 *
 * <a href="https://www.notion.so/Typography-b6759a3047424987887edd456444a721?pvs=4" target="_blank">노션페이지</a>
 * <br/>
 * 타이포그래피를 사용하여 콘텐츠를 최대한 명확하고 효율적으로 표현합니다.<br/>폰트의 크기, 굵기 및 컬러를 활용하여 시각적인 효과를 통해 안정적이고 읽기 쉬운 콘텐츠를 만들어 최적의 가독성을 제공합니다.
 */
const meta = {
    title: 'Foundation/Typography',
    tags: ['autodocs'],
};
exports.default = meta;
// Props 교체 가능
exports.Typography = {
    render: (props) => react_1.default.createElement(Component, Object.assign({}, props)),
    args: {
        children: '',
    },
};
