import type { ReactNode, MouseEvent } from 'react'
import { Link } from 'react-router-dom'

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

import { ProfileTypes, SportTypes } from 'config'

import { getProfileUrl } from './helpers'

type Props = {
  children: ReactNode,
  className?: string,
  disabled?: boolean,
  id: number,
  onClick?: (e: MouseEvent<HTMLAnchorElement>) => void,
  profileType: ProfileTypes,
  sportType: SportTypes,
  target?: string,
}

const ScLink = styled(Link)<{disabled?: boolean}>`
  ${({ disabled }) => disabled && css`
    pointer-events: none;
  `}
`

export const ProfileLink = ({
  children,
  className,
  disabled,
  id,
  onClick,
  profileType,
  sportType,
  target,
}: Props) => {
  const url = getProfileUrl({
    id,
    profileType,
    sportType,
  })
  return (
    <ScLink
      disabled={disabled}
      to={url}
      className={className}
      target={target}
      onClick={onClick}
    >
      {children}
    </ScLink>
  )
}
