"use client";

import createTenant from "@/actions/tenants/create-tenant";
import { useEffect, useRef } from "react";
import { useFormState } from "react-dom";

export default function CreateTenantButton() {
const dialogRef = useRef<HTMLDialogElement>(null!);
const [state, action] = useFormState(createTenant, { errors: null! });

useEffect(() => {}, []);

return (
#Unknown Channel
<button className="btn" onClick={() => dialogRef.current.showModal()}>
Create
</button>
<dialog id="create_tenant_modal" className="modal" ref={dialogRef}>
<div className="modal-box">
<h3 className="font-bold text-lg">Create a new Tenant</h3>
<form action={action}>
<p className="py-4">
<input
name="name"
className="input input-bordered"
placeholder="tenant name"
/>
{state.errors?.name && (
<span className="text-red-500 block">{state.errors.name}</span>
)}
</p>
<div className="modal-action">
<button
className="btn btn-primary"
type="submit"
onClick={() =>
state.errors === null && dialogRef.current.close()
}
>
Create
</button>
</div>
</form>
</div>
</dialog>
</>
);
}

This component is used by a server component