import React from 'react';
import { useNavigate } from 'react-router-dom';
import { Button } from 'react-bootstrap';

const Error404 = () => {
  const navigate = useNavigate();

  return (
    <div
      className="d-flex flex-column justify-content-center align-items-center vh-100"
      style={{ backgroundColor: '#f7f7f7' }}
    >
      <div className="text-center">
        <div style={{ fontSize: '80px', color: '#f44336' }}>
          <span style={{ fontSize: '100px' }}>🛡️❌</span>
        </div>
        <h1 style={{ color: 'red', fontWeight: 'bold' }}>error 404</h1>
        <p style={{ color: '#555', fontSize: '18px' }}>
          Not found your page requested.
        </p>

        <Button
          variant="primary"
          className="mt-4"
          onClick={() => navigate('/admin/index')} // Adjust path if needed
        >
          Go to home
        </Button>
      </div>
    </div>
  );
};

export default Error404;
