import React, { memo } from 'react'

import { H } from 'component/Heading/style'

import { theme } from 'shared/theme'

export const HeadingType = {
    h1: 'h1',
    h2: 'h2',
    h3: 'h3',
    h4: 'h4',
    h5: 'h5',
    h6: 'h6'
}

const HeadingTypography = {
    h1: {
        fontSize: theme.fontSize._6,
        lineHeight: theme.spacing._8
    },
    h2: {
        fontSize: theme.fontSize._5,
        lineHeight: theme.spacing._7
    },
    h3: {
        fontSize: theme.fontSize._4,
        lineHeight: theme.spacing._6
    },
    h4: {
        fontSize: theme.fontSize._3,
        lineHeight: theme.spacing._5
    },
    h5: {
        fontSize: theme.fontSize._2,
        lineHeight: theme.spacing._4
    },
    h6: {
        fontSize: theme.fontSize._1,
        lineHeight: theme.spacing._3
    }
}

export const Heading = memo(p => {
    const { as = HeadingType.h2 } = p

    return <H {...HeadingTypography[as]} {...p} />
})