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

import { ProfileTypes, SportTypes } from 'config'

import { getProfileUrl } from './helpers'

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

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