"use client"

import { usePathname } from "next/navigation"

import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
import { trpc } from "@scandic-hotels/trpc/client"

import useLang from "@/hooks/useLang"

import Desktop from "./Desktop"
import Mobile from "./Mobile"

export default function LanguageSwitcher() {
  const currentLanguage = useLang()
  const pathName = usePathname()

  const { data: languagesResponse, isLoading } =
    trpc.contentstack.languageSwitcher.get.useQuery({
      pathName,
      lang: currentLanguage,
    })

  if (isLoading) {
    return <SkeletonShimmer width="12ch" />
  }

  if (!languagesResponse?.urls) {
    return null
  }

  return (
    <>
      <Desktop urls={languagesResponse.urls} />
      <Mobile urls={languagesResponse.urls} />
    </>
  )
}