"use client";
import { createGameSystem } from "@/actions/GameSystems";
import { useToast } from "@/components/toast";
import { redirect } from "next/navigation";

export default function CreateGameSystem() {
  const { createToast } = useToast();
  async function create(form: FormData) {
    const name = form.get("name")?.toString();
    if (!name)
      return createToast({ msg: "Please provide a name", fading: true });
    createToast({ msg: "Creating Game System", fading: true });
    const id = await createGameSystem(name);
    if (!id)
      return createToast({
        msg: "Issue creating game system. Is your email verified?",
        fading: true,
        type: "error",
      });
    redirect(`/game-systems/${id}`);
  }

  return (
    <form action={create}>
      <input
        type="text"
        name="name"
        placeholder="Create a new game system..."
        className="w-min"
      />
      <button className="btn-primary p-2 px-2 ml-2" type="submit">
        Create
      </button>
    </form>
  );
}