'use client'
import useDisclosure from '@/hooks/useDisclosure'
import Modal from '@/components/modals/Modal'
import useLoading from '@/hooks/useLoading'
import DotLoadingIcon from '@/components/icons/DotLoadingIcon'
import SidebarLogo from '@/components/ui/SidebarLogo'

const Loading = () => {
  const { onOpenChange } = useDisclosure()
  const { loading } = useLoading()

  return (
    <Modal
      key={loading ? '1' : '0'}
      hideCloseButton
      hideFooter
      hideHeader
      className="p-4 !w-[300px]"
      isLoading={loading}
      isOpen={loading}
      placement="center"
      onOpenChange={onOpenChange}
    >
      <div className="flex items-center justify-center flex-col gap-4">
        <SidebarLogo disableClick />
        <p className="flex gap-1 items-center justify-center">
          در حال بارگزاری اطلاعات <DotLoadingIcon />
        </p>
      </div>
    </Modal>
  )
}

export default Loading