import { styled } from 'styleh-components'
import { PrimaryButton } from 'presets/Buttons'
import { LabelElement } from 'atoms/Text'
import { DetailedList, DetailedListItemPanel, DetailedListLabel, DetailedListValue } from 'molecules/DetailedList'

const labelStyles = styled.css`
  text-transform: capitalize;
  color: var(--color-black);
  margin-right: rem(6);

  @phone-or-smaller() {
    font-size: rem(12);
  }
`
const valueStyles = styled.css`
  text-transform: capitalize;
  color: var(--color-black);
  font-weight: 700;
  margin: 0;

  @phone-or-smaller() {
    font-size: rem(12);
  }
`

const StyledDetailedList = styled.withComponent(DetailedList)`
  ${DetailedListItemPanel} {
    margin: 0;
    margin-bottom: rem(8);

    @phone-or-smaller() {
      flex-direction: row;
    }
  }

  ${DetailedListLabel} {
    ${labelStyles};
  }

  ${DetailedListValue}{
    ${valueStyles};
  }
`

const StyledButton = styled.withComponent(PrimaryButton)`
  cursor: pointer;
  height: auto;
  padding: 0;
  margin: 0;
  width: auto;
  background: transparent;

  ${LabelElement} {
    text-transform: capitalize;
    text-decoration: none;
    color: var(--color-blue);
    margin: 0;
  }
`

export { StyledDetailedList, StyledButton }