import React from "react";
import { Box, Button, Paper, Typography } from "@mui/material";
import { useNavigate } from "react-router-dom";
import { useI18n } from "../i18n/I18nProvider";

export default function NotFoundPage() {
  const navigate = useNavigate();
  const { t } = useI18n();

  return (
    <Paper sx={{ p: { xs: 3, md: 5 }, borderRadius: 4 }}>
      <Box sx={{ display: "grid", gap: 1.5, maxWidth: 560 }}>
        <Typography variant="overline" sx={{ color: "text.secondary", letterSpacing: 1.6 }}>
          404
        </Typography>
        <Typography variant="h4" sx={{ fontWeight: 800 }}>
          {t("notFoundTitle")}
        </Typography>
        <Typography sx={{ color: "text.secondary" }}>
          {t("notFoundBody")}
        </Typography>
        <Box sx={{ display: "flex", gap: 1.5, flexWrap: "wrap", mt: 1 }}>
          <Button variant="contained" onClick={() => navigate("/jobs")}>
            {t("goHome")}
          </Button>
          <Button variant="outlined" onClick={() => navigate(-1)}>
            {t("goBack")}
          </Button>
        </Box>
      </Box>
    </Paper>
  );
}