"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 AddCriteriaForm from "@/components/criteria-form";

export default function Page() {
  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 Criteria
            </CardTitle>
            <Separator />
          </CardHeader>

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