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

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 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>
            <AddOrganizationForm />
          </CardContent>
        </Card>
      </div>
      <ScrollBar />
    </ScrollArea>
  );
}