import { styled } from 'styleh-components'
import { PrimaryButton } from 'presets/Buttons'
import { LabelElement } from '@skava/ui/dist/components/atoms/Text'
import {
  DetailedList,
  DetailedListItemPanel,
  DetailedListLabel,
  DetailedListValue,
} from '@skava/ui/dist/components/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(DetailedList) `
  ${DetailedListItemPanel} {
    margin: 0;
    margin-bottom: rem(8);

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

  ${DetailedListLabel} {
    ${labelStyles};
  }

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

const StyledButton = styled(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 }