"use client";

import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
import { Separator } from "@/components/ui/separator";
import ConfigurationForm from "@/components/configuration-form";
import Breadcrumb from "@/components/breadcrumb";
import { dummyApiCommunications, dummyConfigurations } from "@/constants/data";
import { Configuration } from "@/types/configuration";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import APICommunicationForm from "@/components/api-communication-form";
import { ApiCommunication } from "@/types/api-communication";

const breadcrumbItems = [
  { title: "Dashboard", link: "/dashboard" },
  { title: "Api Communications", link: "/dashboard/api-communications" },
  { title: "Edit" },
];

export default function Page({ params }: { params: { id: string } }) {
  const apiCommunication = dummyApiCommunications.find(
    (apiCommunication) => apiCommunication.id === +params.id
  );

  return (
    <ScrollArea className="h-[calc(100vh-53px)]">
      <div className="flex-1 space-y-4  p-4 md:p-8 pt-6">
        <Breadcrumb items={breadcrumbItems} />
        <div className="w-full h-full flex justify-center items-center">
          <Card className="max-w-[700px] w-full mb-8">
            <CardHeader>
              <CardTitle className="mb-4 font-bold text-xl">
                Edit Api Communication
              </CardTitle>
              <Separator />
            </CardHeader>

            <CardContent>
              <APICommunicationForm
                apiCommunication={apiCommunication as ApiCommunication}
                onSubmit={() => {}}
                btn1_content="Save and continue editing"
                btn2_content="Save changes"
              />
            </CardContent>
          </Card>
        </div>
      </div>
      <ScrollBar />
    </ScrollArea>
  );
}