"use client";

import { delete{{tableObj.singularPascalCase}}, Delete{{tableObj.singularPascalCase}}State } from "@/actions/{{authorizationLevel}}/{{tableObj.pluralKebabCase}}/delete-{{tableObj.singularKebabCase}}";
import { Button } from "@/components/ui/button";
import { FormAlert } from "@/components/form-alert";
import { useActionState } from "react";
import { {{tableObj.singularPascalCase}} } from "@/schema/{{tableObj.pluralKebabCase}}";

export function {{tableObj.singularPascalCase}}DeleteForm({ {{tableObj.singularCamelCase}} }: { {{tableObj.singularCamelCase}}: {{tableObj.singularPascalCase}} }) {
  const initialState: Delete{{tableObj.singularPascalCase}}State = {};
  const [state, dispatch] = useActionState(delete{{tableObj.singularPascalCase}}, initialState);

  return (
    <div>
      <form action={dispatch} className="flex flex-col gap-2">
        <input type="hidden" name="id" value={ {{tableObj.singularCamelCase}}.id} />
        <div>
          <p><strong>Id:</strong> { {{tableObj.singularCamelCase}}.id}</p>
        </div>
        <div>
          <Button type="submit" variant="destructive">
            Delete
          </Button>
        </div>
        <FormAlert state={state} />
      </form>
    </div>
  );
}