"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} />
  )
}