import t from 'prop-types'
import styled from 'styled-components'
import { rgba } from 'polished'

import { Link, BoldText, media } from 'ui'
import { insertComponentsIntoText } from 'resources'

export const components = {
  hacktoberfest: <Link key='hacktoberfest' href='https://hacktoberfest.digitalocean.com/'>Hacktoberfest</Link>,
  digitalocean: <Link key='digitalocean' href='https://www.digitalocean.com/'>DigitalOcean</Link>,
  github: <Link key='github' href='https://www.github.com/'>GitHub</Link>,
  fdaciuk: <Link key='@fdaciuk' href='https://twitter.com/fdaciuk'>@fdaciuk</Link>,
  beginner: <BoldText key='beginner'>iniciante</BoldText>,
  advanced: <BoldText key='advanced'>avançado</BoldText>,
}

export const TextBox = ({ id, title, text, invert }) => {
  return (
    <Wrapper id={id}>
      <Title invert={invert}>{title}</Title>
      <Text>{insertComponentsIntoText(text, components)}</Text>
    </Wrapper>
  )
}

TextBox.propTypes = {
  id: t.string,
  title: t.string.isRequired,
  text: t.string.isRequired,
  invert: t.bool,
}

const Wrapper = styled.div`
  display: flex;
  flex-direction: column;
`

const Title = styled.h3`
  font-size: clamp(2.4rem, 4vw, 3.6rem);
  font-weight: 700;
  position: relative;
  display: inline-block;
  padding-left: 6rem;
  margin-bottom: 2.5rem;

  &:before {
    content: '';
    position: absolute;
    height: 0.2rem;
    width: 3.5rem;
    left: 0;
    top: calc(50% - 0.1rem);
    background-color: ${({ theme }) => theme.colors.primary};
  }

  ${({ invert }) => invert && media.greaterThan('md')`
    align-self: flex-end;
  `};
`

const Text = styled.p`
  font-size: clamp(1.6rem, 4vw, 2rem);
  line-height: 1.7;
  color: ${({ theme }) => rgba(theme.colors.text, 0.5)};
`