import { style } from '@xstyled/styled-components'

export type IsTruncatedProps = {
  isTruncated?: boolean
}

/** Provides styling to truncate single-line text. */
export const isTruncated = style({
  prop: 'isTruncated',
  cssProperty: function () {
    return {
      overflow: 'hidden',
      'text-overflow': 'ellipsis',
      'white-space': 'nowrap',
    }
  },
  states: {},
})

export type MaxLinesProps = {
  maxLines?: number
}

/** Provides styling to truncate multi-line text. */
export const maxLines = style({
  prop: 'maxLines',
  cssProperty: function (value: any) {
    return {
      display: '-webkit-box',
      overflow: 'hidden',
      '-webkit-line-clamp': `${value}`,
      '-webkit-box-orient': 'vertical',
    }
  },
  states: {},
})

export type WordBreakProps = {
  wordBreak?: 'normal' | 'break-all' | 'keep-all' | 'break-word'
}

export const wordBreak = style({
  prop: 'wordBreak',
})
