'use client'

import { useMediaQuery } from 'usehooks-ts'

import CountryCombobox from './CountryCombobox'
import CountrySelect from './CountrySelect'

import type { CountryProps } from './country'

export default function Country(props: CountryProps) {
  const isDesktop = useMediaQuery('(min-width: 768px)', {
    initializeWithValue: false,
  })

  return isDesktop ? (
    <CountryCombobox {...props} />
  ) : (
    <CountrySelect {...props} />
  )
}