import React, { useState } from "react";
import {
  BackHomeButton,
  CommandPalletteButton,
  MinimalPage,
  PageHeading,
} from "ui";
import { BugReportButton, CommandInterface, Navigation } from "@/components";
import ManagerAndCoatingForm from "@/components/forms/managerAndCoatingForm";
import { UpdateCoating, UpdateManager } from "@/types/vessel";

const MenteithUpdater: React.FC = () => {
  const [managerData, setManagerData] = useState<UpdateManager[]>([]);
  const [coatingData, setCoatingData] = useState<UpdateCoating[]>([]);

  return (
    <MinimalPage
      pageTitle={"Update Vessel Manager | Vessel Interface"}
      pageDescription={"Vessel Interface | Update Vessel Manager"}
    >
      <div className="flex w-full flex-row justify-between pl-1 pt-1">
        <div>
          <BackHomeButton />
        </div>
        <Navigation />
        <div className="flex flex-row gap-4">
          <BugReportButton />
          <CommandPalletteButton />
          <CommandInterface />
        </div>
      </div>

      <PageHeading text="Update Vessel Manager" />

      <ManagerAndCoatingForm
        onManagerDataUpdate={setManagerData}
        onCoatingDataUpdate={setCoatingData}
      />
    </MinimalPage>
  );
};

export default MenteithUpdater;