import { useTranslation } from 'react-i18next'
import lengthBlueBtn from '@/assets/system/length-blue-btn.webp'
import lengthGreenBtn from '@/assets/system/length-green-btn.webp'
import noticeBg from '@/assets/system/notice-bg.webp'
import { CenterModal } from '@/components/center-modal.tsx'
import { SmartBackground } from '@/components/smart-background.tsx'
import { SmartImage } from '@/components/smart-image.tsx'
import { useModalStore } from '@/store'

function DesktopNoticeModal() {
  const { t } = useTranslation()
  const open = useModalStore((state) => state.modals.desktopNotice)
  const setModalOpen = useModalStore((state) => state.setModalOpen)

  function handleSubmit() {
    setModalOpen('desktopNotice', false)
  }

  return (
    <CenterModal
      open={open}
      onClose={handleSubmit}
      title={
        <div className={'modal-title-glow text-design-26'}>
          {t('game.modals.notice.title')}
        </div>
      }
      isNormalBg={true}
      titleAlign="left"
      className={'w-design-1000 h-design-690'}
    >
      <div className={'flex flex-col h-full w-full p-design-10 gap-design-30'}>
        <div
          className={
            'w-full h-design-440 overflow-y-auto flex flex-col gap-design-20 bg-[#000000]/50 p-design-10 rounded-md'
          }
        >
          <SmartImage
            className={'w-full h-design-300 shrink-0 rounded-md'}
            imgClassName={'object-contain object-center'}
            alt={'notice'}
            src={noticeBg}
          />

          <div className={'text-[#74B3BA] text-design-18 leading-[1.6]'}>
            {t('game.modals.notice.content')}
          </div>
        </div>
        <div className={'w-full flex justify-around'}>
          <SmartBackground
            src={lengthGreenBtn}
            size="106% 108%"
            repeat="no-repeat"
            position="center"
            className={
              'w-design-270 h-design-72 pb-design-5 flex items-center justify-center text-design-20 font-bold'
            }
          >
            {t('game.modals.notice.check')}
          </SmartBackground>

          <SmartBackground
            src={lengthBlueBtn}
            size="100% 90%"
            repeat="no-repeat"
            position="center"
            className={
              'w-design-270 h-design-72 pb-design-5 flex items-center justify-center text-design-20 font-bold'
            }
          >
            {t('game.modals.notice.check')}
          </SmartBackground>
        </div>
      </div>
    </CenterModal>
  )
}

export default DesktopNoticeModal