"use client";

import UserForm from "@/components/user-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";

const breadcrumbItems = [
  { title: "Dashboard", link: "/dashboard" },
  { title: "Users", link: "/dashboard/users" },
  { 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 mb-8">
            <CardHeader>
              <CardTitle className="mb-4 font-bold text-xl">
                Create User
              </CardTitle>
              <Separator />
            </CardHeader>

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