import React from 'react'
import { styled } from 'view-container'
import { SeparatorIcon } from 'atoms/Icons/SeparatorIcon'
import { classes } from './fixture'
import { LabelElement } from 'atoms/Text/Label'

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

  ${props => props.color && styled.css`
    color: ${props.color};
  `}
`

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

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

const RightsText = LabelElement.withComponent('span')

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

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