import React from 'react';
import { Container, Button } from 'react-bootstrap';
import { useNavigate } from 'react-router-dom';
import { FaExclamationTriangle, FaHome } from 'react-icons/fa';
import './NotFound.css';

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

  return (
    <div className="not-found-wrapper">
      <Container className="d-flex flex-column align-items-center justify-content-center text-center">
        <div className="not-found-content">
          <div className="error-code">404</div>
          <div className="error-icon">
            <FaExclamationTriangle />
          </div>
          <h1 className="error-title">Oops! Halaman Tidak Ditemukan</h1>
          <p className="error-message">
            Maaf, halaman yang Anda cari tidak tersedia atau mungkin telah dipindahkan.
          </p>
          <Button 
            variant="primary" 
            size="lg" 
            onClick={() => navigate('/')}
            className="back-btn d-flex align-items-center gap-2"
          >
            <FaHome /> Kembali ke Beranda
          </Button>
        </div>
      </Container>
      
      {/* Background decoration */}
      <div className="bg-circle-1"></div>
      <div className="bg-circle-2"></div>
    </div>
  );
};

export default NotFound;
