/**
 * 오류 페이지 (PRD §3.5.4) — 404/500/네트워크/토큰 만료 등
 */
import { useNavigate, useParams } from 'react-router-dom';
import styled from 'styled-components';

const Page = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px;
  text-align: center;
`;

const Code = styled.div`
  font-size: 56px;
  font-weight: 800;
  color: var(--pcnt-primary);
`;

const Msg = styled.p`
  margin: 12px 0 24px;
  color: var(--pcnt-text-sub);
`;

export default function ErrorPage() {
  const { code = 'error' } = useParams();
  const nav = useNavigate();
  const messages: Record<string, string> = {
    '404': '요청하신 페이지를 찾을 수 없습니다.',
    '500': '서버 오류가 발생했습니다. 잠시 후 다시 시도해주세요.',
    network: '네트워크 연결을 확인해주세요.',
    token: '로그인 세션이 만료되었습니다. 다시 로그인해주세요.',
  };
  return (
    <Page>
      <Code>{code.toUpperCase()}</Code>
      <Msg>{messages[code] ?? '문제가 발생했습니다.'}</Msg>
      <button className="btn-primary" onClick={() => nav('/home')}>홈으로</button>
    </Page>
  );
}