'use client'

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

import Search from '@/components/community/Search'
import Pagination from '@/components/community/Pagination'
import Table from '@/components/community/Table'

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

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

export default function Notice() {
  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.notice.title'),
    subTitle: getMessage('board.notice.sub.title'),
    clsCode: 'NOTICE',
  }
  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.notice.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.notice.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={true} />
            <Table clsCode={boardType.clsCode} />
            <Pagination />
          </div>
        </div>
      </div>
    </>
  )
}