import PageHeader from "@/components/PageHeder";
import ActionButton from "@/components/action-button";
import StaffView from "@/components/staffs/staff-view";
import getData from "@/utils/fetch";
import { Metadata } from "next";
import { MdEditSquare } from "react-icons/md";
export const metadata: Metadata = {
  title: "view | staff",
};

export default async function View({ params }: any) {
  const { Id } = params;
  const url = `/api/v1/staffs/${Id}`;
  const { data: staff } = await getData(url);
  return (
    <>
      <PageHeader>
        <div className="flex justify-between !p-0">
          <h2 className="text-xl font-semibold">Staffs Details</h2>
          <div className="flex">
            <ActionButton type="back" href="/staffs" className="mr-2" />
            <ActionButton type="back" href={`/staffs/edit/${Id}`}>
              <MdEditSquare className="text-lg text-white block mr-2" /> Edit
            </ActionButton>
          </div>
        </div>
      </PageHeader>
      <div className="overflow-hidden">
        <StaffView staff={staff} />
      </div>
    </>
  );
}