import React from 'react'

function Type({ section = 'default' }) {
  const baseStyle = {
    padding: '20px',
    borderBottom: 'solid thin rgba(0,0,0,.2)',
    fontWeight: 'bold',
    fontFamily: '"Open Sans", sans-serif'
  }
  const renderSection = sect => ({
    default() {
      return (
        <div style={{ margin: '10px 0 60px' }}>
          <h1 style={{ ...baseStyle, fontSize: '48px' }}>Heading 1 - 48px</h1>
          <h2 style={{ ...baseStyle, fontSize: '36px' }}>Heading 2 - 36px</h2>
          <h3 style={{ ...baseStyle, fontSize: '32px' }}>Heading 3 - 32px</h3>
          <h4 style={{ ...baseStyle, fontSize: '28px' }}>Heading 4 - 28px</h4>
          <h5 style={{ ...baseStyle, fontSize: '24px' }}>Heading 5 - 24px</h5>
          <h6 style={{ ...baseStyle, fontSize: '18px' }}>Heading 6 - 18px</h6>
          <p style={{ ...baseStyle, fontSize: '16px', fontWeight: 'normal' }}>Paragraph - 16px</p>
        </div>
      )
    },
    copy() {
      return (
        <div style={{ background: 'rgba(0,0,0,.1)', borderRadius: '4px', padding: '10px', margin: '10px 0 60px' }}>
          <h1 style={{ ...baseStyle, fontSize: '48px', border: 0, paddingBottom: 0 }}>Heading of a document</h1>
          <p style={{ ...baseStyle, fontSize: '16px', fontWeight: 'normal', border: 0 }}>Here lies a body copy. A copy in a paragraph, a paragraph in a page, a page in a website, a website on a server, a server on the internet - A wide area network. How wide is it really? Maybe wide enough for me to prefer to live in a tiny space called 127.0.0.1. umm... no we call it app.ck.lol</p>
        </div>
      )
    },
    sizing() {
      return (
        <div style={{ margin: '10px 0 60px' }}>
          <p style={{ ...baseStyle, fontWeight: 'normal' }} className="text-4xl">4xl: The quick brown fox jumped over the dog</p>
          <p style={{ ...baseStyle, fontWeight: 'normal' }} className="text-3xl">3xl: The quick brown fox jumped over the dog</p>
          <p style={{ ...baseStyle, fontWeight: 'normal' }} className="text-2xl">2xl: The quick brown fox jumped over the dog</p>
          <p style={{ ...baseStyle, fontWeight: 'normal' }} className="text-xl">xl: The quick brown fox jumped over the dog</p>
          <p style={{ ...baseStyle, fontWeight: 'normal' }} className="text-lg">lg: The quick brown fox jumped over the dog</p>
          <p style={{ ...baseStyle, fontWeight: 'normal' }} className="text-base">base: The quick brown fox jumped over the dog</p>
          <p style={{ ...baseStyle, fontWeight: 'normal' }} className="text-sm">sm: The quick brown fox jumped over the dog</p>
          <p style={{ ...baseStyle, fontWeight: 'normal' }} className="text-xs">xs: The quick brown fox jumped over the dog</p>
        </div>
      )
    },
    weight() {
      return (
        <div style={{ margin: '10px 0 60px' }}>
          <p style={{ ...baseStyle, fontWeight: 300 }}>Light - 300</p>
          <p style={{ ...baseStyle, fontWeight: 400 }}>Regular - 400</p>
          <p style={{ ...baseStyle, fontWeight: 600 }}>Semi-bold - 600</p>
          <p style={{ ...baseStyle, fontWeight: 700 }}>Bold - 700</p>
          <p style={{ ...baseStyle, fontWeight: 800 }}>Extra-bold - 800</p>
        </div>
      )
    },
  }[sect])

  return renderSection(section)()
}

export default Type