import React from 'react'
import { styled } from 'uxui-modules/view-container'

/**
 * @Ganesh IMPORTANT
 * Replace with the appropriate elements
 * @todo use correct fonts
 */

const DescriptionHeading = styled.h3.attrs({
  children: props => props.text,
})`
  @font (18, bold);
  color: $colors-black;
`

// dl
const DescriptionContainer = styled.div.attrs({
  'data-qa': props => props.qa,
})`
  color: $colors-grey;
  margin: 0 auto;
  width: $spacing-max-width;
`

const DescriptionItem = styled.div`
  display: flex;
  border-bottom: 1px solid $colors-lightgrey;
  padding: $spacing-small 0;
  flex-direction: row;
`

// dt
const DescriptionTitle = styled.div`
  @font (14,bold);
  flex: 0.5;
  @phone-or-smaller() {
    flex: 0.5;
  }
`

// dd
const DescriptionValue = styled.div`
  @font (14);
  flex: 3;
`

export {
  DescriptionHeading,
  DescriptionContainer,
  DescriptionItem,
  DescriptionTitle,
  DescriptionValue,
}