import React from 'react';
import { Box, Typography, Button, Container } from '@mui/material';
import { Link as RouterLink } from 'react-router-dom';
import SentimentDissatisfiedIcon from '@mui/icons-material/SentimentDissatisfied';

const NotFoundPage = () => {
  return (
    <Container maxWidth="md">
      <Box
        sx={{
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          justifyContent: 'center',
          minHeight: '50vh',
          textAlign: 'center',
          py: 4,
        }}
      >
        <SentimentDissatisfiedIcon sx={{ fontSize: 100, color: 'text.secondary', mb: 2 }} />
        
        <Typography variant="h3" component="h1" gutterBottom>
          404 - Page Not Found
        </Typography>
        
        <Typography variant="h5" color="text.secondary" paragraph>
          Oops! The page you are looking for does not exist.
        </Typography>
        
        <Typography variant="body1" color="text.secondary" paragraph>
          It seems you've ventured too far into the wilderness.
          This natural specimen hasn't been discovered yet.
        </Typography>
        
        <Box sx={{ mt: 3 }}>
          <Button
            variant="contained"
            component={RouterLink}
            to="/"
            size="large"
            sx={{ mr: 2 }}
          >
            Back to Home
          </Button>
          
          <Button
            variant="outlined"
            component={RouterLink}
            to="/products"
          >
            Browse Products
          </Button>
        </Box>
      </Box>
    </Container>
  );
};

export default NotFoundPage;