"use client"

import CreateLayoutForm from "@/components/form/form-layout/layout-form";
import CreateValidationForm from "@/components/form/form-validation/validation-form";
import CreateWizardForm from "@/components/form/form-wizard/wizard-form";
import AuthtorsTable from "@/components/table/authors-table";
import CustomerTable from "@/components/table/customers-table";
import InvoiceTable from "@/components/table/invoice-table";
import UserTable from "@/components/table/article-table";
import UsersTable from "@/components/table/users-table";
import { Card, Divider, Image } from "@nextui-org/react";
import { useEffect, useState } from "react";

export default function FormLayoutPage() {

	return (
		<div className="flex h-[96vh] overflow-x-hidden overflow-y-scroll gap-0 grid rounded-lg border-small ml-4">
			<div className="px-4">
				<div className="bg-blue-900 mx-[24px] h-[120px] my-5 rounded-md">
					<div>
						<div className="flex flex-row justify-between items-center">
							<div>
								<p className="text-2xl font-semibold ml-5 text-white">Form Layout</p>
								<p className="text-white ml-5">Home<span className="text-white">{"  >  "}</span> <span className=" text-white">Form Layout</span></p>
							</div>
							<div className="pr-5">
								<Image
									width={110}
									alt="NextUI hero Image"
									src="https://modernize-nextjs-dark.vercel.app/_next/image?url=%2F_next%2Fstatic%2Fmedia%2FChatBc.3d875e2e.png&w=256&q=75"
								/>
							</div>
						</div>
					</div>
				</div >
				<CreateLayoutForm />
			</div>
		</div>
	);
}