"use client"

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
import { Separator } from "@/components/ui/separator";
import OrganizationForm from "@/components/organization-form";
import Breadcrumb from "@/components/breadcrumb";

const breadcrumbItems = [
  { title: "Dashboard", link: "/dashboard" },
  { title: "Organizations", link: "/dashboard/organizations" },
  { title: "Add" },
];

export default function SettingsDisplayPage() {
  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">
                Create Organization
              </CardTitle>
              <Separator />
            </CardHeader>

            <CardContent>
              <OrganizationForm
                onSubmit={() => {}}
                btn1_content="Create"
                btn2_content="Create and add another"
              />
            </CardContent>
          </Card>
        </div>
      </div>
      <ScrollBar />
    </ScrollArea>
  );
}