import React from 'react'
import { styled } from 'styleh-components'
import { SeparatorIcon } from 'atoms/Icons/SeparatorIcon'
import { LabelElement } from 'atoms/Text/Label'

// adding margin so extending the style of separator icon
const SeparatorElement = styled.span `
  margin: 0 16px;
`

const CopyrightSection = styled.section.attrs({
  className: 'copyright-panel',
}) `
  display: flex;
  flex: 1;
  align-items: center;
`
const LogoText = LabelElement.as('span')

const Logo = styled.withComponent(LogoText).attrs({
  'data-qa': 'qa-copyright',
  'className': 'copyright-logo',
}) `
  text-transform: uppercase;
`

const RightsText = LabelElement.as('span')

const Text = styled.withComponent(RightsText).attrs({
  'data-qa': 'qa-rights',
  'className': 'copyright-text',
}) `
  text-transform: uppercase;
`

export { CopyrightSection, Logo, Text, SeparatorElement }
export default CopyrightSection