"use client";

import { useActionState } from "react";
import { createFolder } from "@/lib/actions/folders";

export function NewFolderForm({ onCreated }: { onCreated?: () => void }) {
  const [state, formAction, isPending] = useActionState(createFolder, undefined);

  return (
    <form
      action={async (formData) => {
        await formAction(formData);
        onCreated?.();
      }}
      className="flex max-w-sm gap-2"
    >
      <input
        type="text"
        name="name"
        placeholder="New folder name"
        required
        className="min-w-0 flex-1 rounded border border-charcoal/20 bg-cream px-3 py-1.5 text-sm text-charcoal"
      />
      <button
        type="submit"
        disabled={isPending}
        className="shrink-0 rounded-full bg-terracotta px-4 py-1.5 text-sm font-medium text-white hover:bg-terracotta/90 disabled:opacity-60"
      >
        Create
      </button>
      {state?.error && <p className="text-xs text-terracotta">{state.error}</p>}
    </form>
  );
}