import type { ReactNode } from 'react'
import {
  createContext,
  useContext,
} from 'react'

import { useMatchPage } from './hooks'

type Context = ReturnType<typeof useMatchPage>
type Props = { children: ReactNode }

const MatchPageContext = createContext({} as Context)

export const MatchPageStore = ({ children }: Props) => {
  const values = useMatchPage()
  return <MatchPageContext.Provider value={values}>{children}</MatchPageContext.Provider>
}

export const useMatchPageStore = () => useContext(MatchPageContext)
