import { FC } from 'react';
import { useNavigate } from 'react-router';

export const ErrorScene: FC = () => {
  const navigate = useNavigate();
  const handleClearLocalStorage = () => {
    localStorage.clear();
  };

  return (
    <div className="h-screen w-screen flex items-center justify-center">
      <div className="flex flex-col gap-4 gap-4 p-12 container">
        <div className="flex items-center gap-4 text-black/70">
          <div className="i-mdi-robot-dead h-12 w-12" />
          <div className="text-5xl">發生錯誤，請聯絡系統管理員</div>
        </div>
        <a
          className="text-blue-600 hover:text-blue-400 cursor-pointer underline"
          onClick={() => navigate(-1)}
        >
          回到上一頁
        </a>
        <a
          className="text-blue-600 hover:text-blue-400 cursor-pointer underline"
          onClick={() => {
            handleClearLocalStorage();
            navigate(-1);
          }}
        >
          還原
        </a>
      </div>
    </div>
  );
};
