"use client";

import AccountForm from "@/components/account-form";
import Breadcrumb from "@/components/breadcrumb";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
import { Separator } from "@/components/ui/separator";
import { dummyAccounts } from "@/constants/data";
import { Account } from "@/types/account";

const breadcrumbItems = [
  { title: "Dashboard", link: "/dashboard" },
  { title: "Accounts", link: "/dashboard/accounts" },
  { title: "Edit" },
];

export default function Page({ params }: { params: { id: string } }) {

  const account = dummyAccounts.find((account) => account.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">
            <CardHeader>
              <CardTitle className="mb-4 font-bold text-xl">
                Edit Account
              </CardTitle>
              <Separator />
            </CardHeader>

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