import {type NextPage} from "next";
import {Button, HeadingLink, MinimalPage, PageHeading} from "ui";
import {CommandInterface} from "@/components";
import {useRouter} from "next/router";
import {VesselButton} from "@/components/buttons/vesselButton";
import React from "react";

const ManageVessel: NextPage = () => {
  const router = useRouter();
  return (
    <MinimalPage
      pageTitle={"Manage Vessel | Email Interface"}
      pageDescription={"Spot Ship Email Interface | Manage Vessel"}
      commandPrompt
    >
      <CommandInterface/>
      <div className="w-full">
        <HeadingLink icon={"back"} text={"Home"} href={`/secure/home`}/>
      </div>
      <div>
        <PageHeading text="Manage Vessel"/>
      </div>
      <div className="grid w-full grid-flow-row auto-rows-max gap-8 p-8 pt-16 lg:w-2/3 lg:grid-cols-2">
        <Button
          text="Add Vessel"
          icon="plus-circle"
          iconRight
          action={() => {
            router.push("/secure/manager/manageVessel/addVessel");
          }}
          colour="Primary"
        />
        <Button
          text="Add Regular Vessel"
          icon="plus-circle"
          iconRight
          action={() => {
            router.push("/secure/manager/manageVessel/addRegularVessel");
          }}
          colour="Primary"
        />
        <Button
          text="Edit Vessel"
          icon="edit"
          iconRight
          action={() => {
            router.push("/secure/manager/manageVessel/editVessel");
          }}
          colour="Secondary"
        />
      </div>
      <div className="grid w-full grid-flow-row auto-rows-max gap-8 px-8 lg:w-2/3 lg:grid-cols-2">
        <VesselButton/>
      </div>
    </MinimalPage>
  );
};

export default ManageVessel;