import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { HeaderType } from '@/entities/common/model/types';
import { 
	useSetHeaderTitle,
	useSetHeaderType,
	useSetFooterMode,
  useSetOnBack
} from '@/widgets/sub-layout/use-sub-layout';

export const NoticeListPage = () => {
  const { navigate } = useNavigate();

  useSetHeaderTitle('공지사항');
  useSetHeaderType(HeaderType.LeftArrow);
  useSetFooterMode(true);
  useSetOnBack(() => {
    navigate(PATHS.home);
  });
  return (
    <>
      <main>
        <div className="tab-content">
          <div className="tab-pane sub active">
            <div className="notice114">
              <div className="notice-controls">
                <div className="notice-search">
                  <span className="ic16 search" aria-hidden="true"></span>
                  <input type="text" placeholder="검색어를 입력하세요" />
                </div>
                <div className="notice-filter">
                  <select className="flex-1">
                    <option>전체</option>
                  </select>
                </div>
              </div>
              <div className="notice-list-114">
                <div className="notice-row-114">
                  <div className="notice-txt">
                    <div className="notice-title-114">신한은행 시스템 작업 안내신한은행 시스템 작업 <span className="blue">안내신한은행 시스템 작업</span> 안내신한은행 시스템 작업 안내신한은행 시스템 작업 안내</div>
                    <div className="notice-meta-114">
                      <span className="blue">공지사항</span> ㅣ <span>2025.06.01 10:00:00</span>
                    </div>
                  </div>
                </div>
                <div className="notice-row-114">
                  <div className="notice-txt">
                    <div className="notice-title-114">NICE페이먼츠 도메인 인증서 G2교체 작업 안내</div>
                    <div className="notice-meta-114">
                      <span className="blue">공지사항</span> ㅣ <span>2025.06.01 10:00:00</span>
                    </div>
                  </div>
                </div>
                <div className="notice-row-114">
                  <div className="notice-txt">
                    <div className="notice-title-114">N자금이체 서비스 도메인 인증서 G2 교체 <span className="blue">작업 및 TLS 프로토콜</span> 개선 안내 ...</div>
                    <div className="notice-meta-114">
                      <span className="blue">공지사항</span> ㅣ <span>2025.06.01 10:00:00</span>
                    </div>
                  </div>
                </div>
                <div className="notice-row-114">
                  <div className="notice-txt">
                    <div className="notice-title-114">N자금이체 서비스 <span className="blue">도메인 인증서 G2</span> 교체 작업 및 TLS 프로토콜 개선 안내 ...</div>
                    <div className="notice-meta-114">
                      <span className="blue">공지사항</span> ㅣ <span>2025.06.01 10:00:00</span>
                    </div>
                  </div>
                </div>
                <div className="notice-row-114">
                  <div className="notice-txt">
                    <div className="notice-title-114">NICE페이먼츠 도메인 인증서 G2교체 작업 안내</div>
                    <div className="notice-meta-114">
                      <span className="blue">공지사항</span> ㅣ <span>2025.06.01 10:00:00</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </main>
    </>
  );
};