import { styled } from 'styleh-components'
import Text from 'atoms/Text'

const ItemPanel = styled.li`
  padding: 10px 0;
`

const StyledText = styled.withComponent(Text)``

const ListWrapper = styled.ul`
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: ${props =>
    props.isHorizontalView === true ? 'row' : 'column'};

  ${props =>
    props.isHorizontalView &&
    styled.css`
      ${ItemPanel} {
        margin-right: 10px;
      }
    `};
`

export { ListWrapper, ItemPanel, StyledText }