'use client'

import Link from 'next/link'
import Image from 'next/image'

import Search from '@/components/community/Search'
import ArchiveTable from '@/components/community/ArchiveTable'

import { useEffect, useState } from 'react'
import { useResetRecoilState } from 'recoil'
import { useMessage } from '@/hooks/useMessage'

import { searchState } from '@/store/boardAtom'

export default function Archive() {
  const { getMessage } = useMessage()
  const resetSearch = useResetRecoilState(searchState)
  const [isInitialized, setIsInitialized] = useState(false)

  useEffect(() => {
    resetSearch()
    setIsInitialized(true)
  }, [])

  if (!isInitialized) {
    return null
  }

  const boardType = {
    boardTitle: getMessage('board.archive.title'),
    subTitle: getMessage('board.archive.sub.title'),
    clsCode: 'DOWN',
  }

  return (
    <>
      <div className="sub-header">
        <div className="sub-header-inner">
          <ul className="sub-header-title-wrap">
            <li className="title-item">
              <Link className="sub-header-title" href={'#'}>
                {getMessage('board.archive.title')}
              </Link>
            </li>
          </ul>
          <ul className="sub-header-location">
            <li className="location-item">
              <span className="home">
                <Image src="/static/images/main/home_icon.svg" alt="react" width={16} height={16} />
              </span>
            </li>
            <li className="location-item">
              <span>{getMessage('header.menus.community')}</span>
            </li>
            <li className="location-item">
              <span>{getMessage('board.archive.title')}</span>
            </li>
          </ul>
        </div>
      </div>
      <div className="sub-content">
        <div className="sub-content-inner">
          <div className="sub-table-box">
            <Search title={boardType.boardTitle} subTitle={boardType.subTitle} isSelectUse={false} />
            <ArchiveTable clsCode={boardType.clsCode} />
          </div>
        </div>
      </div>
    </>
  )
}
