'use client'

import dynamic from 'next/dynamic'

import AppVersion from '@/components/ui/AppVersion'

const UserDropdown = dynamic(() => import('@/components/ui/UserDropdown'), {
  ssr: false,
  loading: () => <div className="w-16 h-16 rounded-full bg-primary-100 animate-pulse" />,
})

const SidebarUserFooter = () => {
  return (
    <div className="flex flex-col items-center gap-2 pb-2">
      <UserDropdown />
      <AppVersion className="text-[10px] leading-none text-secondary-30" />
    </div>
  )
}

export default SidebarUserFooter