import type { MouseEvent } from 'react'

import { secondsToHms } from 'helpers'

import { T9n } from 'features/T9n'
import { useMatchPopupStore } from 'features/MatchPopup/store'

import {
  Duration,
  LiveSign,
  Title,
  StyledLink,
} from './styled'

type Props = {
  duration?: number,
  startWatch?: number,
  title: string,
  to: string,
}

export const SimplePlaylistButton = ({
  duration,
  startWatch,
  title,
  to,
}: Props) => {
  const { closePopup } = useMatchPopupStore()
  const onClick = (e: MouseEvent<HTMLAnchorElement>) => {
    e.stopPropagation()
    closePopup()
  }
  return (
    <StyledLink to={to} onClick={onClick}>
      <Title>
        <T9n t={title} />  {startWatch && secondsToHms(startWatch)}
      </Title>
      {duration && <Duration>{secondsToHms(duration)}</Duration>}
      {
        (title === 'watch' || title === 'watch_live_stream')
        && (
          <LiveSign>
            <T9n t='live' />
          </LiveSign>
        )
      }
    </StyledLink>
  )
}
