import type { ReactNode } from 'react'

import styled from 'styled-components/macro'

import isUndefined from 'lodash/isUndefined'

import { secondsToHms } from 'helpers'

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

type Props = {
  active?: boolean,
  children: ReactNode,
  disabled?: boolean,
  duration?: number,
  leftContent?: ReactNode,
  onClick: () => void,
}

const Duration = styled(Title)`
  margin-left: 10px;
  font-weight: normal;
`

export const PlayButton = ({
  active,
  children,
  disabled,
  duration,
  leftContent,
  onClick,
}: Props) => (
  <Button
    onClick={onClick}
    active={active}
    disabled={disabled}
  >
    {leftContent}
    <Title>
      {children}
    </Title>
    {!isUndefined(duration) && <Duration>{secondsToHms(duration)}</Duration>}
  </Button>
)
