import {
  useEffect,
  useState,
} from 'react'

import type { MatchInfo } from 'requests'
import { getMatchInfo } from 'requests'

import { useSportNameParam, usePageId } from 'hooks'

export const useMatchProfile = () => {
  const [matchProfile, setMatchProfile] = useState<MatchInfo>(null)
  const { sportType } = useSportNameParam()
  const matchId = usePageId()

  useEffect(() => {
    getMatchInfo(sportType, matchId).then(setMatchProfile)
  },
  [
    sportType,
    matchId,
  ])

  return matchProfile
}