
import { useLocation, useNavigate } from "react-router-dom";
import { useEffect } from "react";
import { Button } from "@/components/ui/button";
import { FileQuestion, Home } from "lucide-react";

const NotFound = () => {
  const location = useLocation();
  const navigate = useNavigate();

  useEffect(() => {
    console.error(
      "404 Error: 존재하지 않는 경로에 접근 시도:",
      location.pathname
    );
  }, [location.pathname]);

  return (
    <div className="min-h-screen flex items-center justify-center bg-neuro-background">
      <div className="text-center max-w-md px-6">
        <div className="neuro-flat p-8 rounded-xl">
          <div className="neuro-pressed p-5 rounded-full mx-auto w-20 h-20 flex items-center justify-center text-neuro-income mb-6">
            <FileQuestion size={36} />
          </div>
          
          <h1 className="text-3xl font-bold mb-4">페이지를 찾을 수 없습니다</h1>
          <p className="text-gray-500 mb-6">
            요청하신 페이지가 존재하지 않거나 접근 권한이 없습니다. 
            이동하려는 주소가 올바른지 확인해주세요.
          </p>
          
          <div className="flex flex-col space-y-3">
            <Button 
              onClick={() => navigate('/')}
              className="bg-neuro-income hover:bg-neuro-income/90"
            >
              <Home size={18} className="mr-2" />
              홈으로 돌아가기
            </Button>
            
            <Button 
              variant="outline" 
              onClick={() => navigate(-1)}
            >
              이전 페이지로 돌아가기
            </Button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default NotFound;
