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

const ExpandableContent = styled.div ``

const MoreLabel = StyledBaseText.as('span')
const MoreLabelElement = styled.withComponent(MoreLabel) `
  color: blue;
  margin-left: 8px;
`

const TextEllipsisWrapper = styled.section `
  position: relative;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis
  -webkit-box-orient: vertical;

  ${props =>
    props.lines &&
    !props.trimWhitespace &&
    styled.css `
      -webkit-line-clamp: ${props.lines};
    `}
  ${props =>
    props.trimWhitespace &&
    styled.css `
      white-space: nowrap;
    `}
  ${props =>
    props.width &&
    styled.css `
      width: ${props.width + 'px'};
    `}
`

export { TextEllipsisWrapper, ExpandableContent, MoreLabelElement }