import React from 'react';
import { Link } from 'react-router-dom';

import { Button } from '../components/ui/button';

/**
 * What an address the plugin does not know shows, usually a bookmark from an
 * older version: a sentence and the way back, instead of an empty page.
 *
 * @returns {JSX.Element} The page.
 */
const NotFound = (): JSX.Element => (
  <div className="mx-auto flex w-full max-w-xl flex-col items-center gap-3 px-6 py-16 text-center">
    <h1 className="text-xl font-semibold text-foreground">
      This page does not exist
    </h1>
    <p className="text-sm text-muted-foreground">
      The address may come from an older version of the plugin. Every page is in
      the menu on the left.
    </p>
    <Button nativeButton={false} render={<Link to="/hq" />}>
      Go to HQ
    </Button>
  </div>
);

export default NotFound;