import { ReactNode } from 'react'

import styled, { css } from 'styled-components/macro'

import { Button, Title } from '../../styled'

type InterviewProps = {
  overlength?: boolean,
}

const InterviewTitle = styled(Title)<InterviewProps>`
  white-space: normal;
  text-align: start;
  /* stylelint-disable-next-line */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  /* stylelint-disable-next-line */
  -webkit-box-orient: vertical;
  
   ${({ overlength }) => (
    overlength
      ? css`
         font-size: 18px;
         line-height: 26px;
        `
      : css`
         font-size: 20px;
         line-height: 50px;
        `
  )}
`

const InterviewButton = styled(Button)<InterviewProps>`
  ${({ overlength }) => (
    overlength
      ? 'padding: 16px 25px;'
      : 'padding: 0px 25px;'
  )}
`

type Props = {
  active?: boolean,
  children: ReactNode,
  onClick: () => void,
  overlength?: boolean,
}

export const InterviewPlayButton = ({
  active,
  children,
  onClick,
  overlength,
}: Props) => (
  <InterviewButton
    onClick={onClick}
    active={active}
    overlength={overlength}
  >
    <InterviewTitle
      overlength={overlength}
    >
      {children}
    </InterviewTitle>
  </InterviewButton>
)
