"use client";

import { useActionState } from "react";
import { createBrand } from "@/lib/actions/admin";

export function NewBrandForm() {
  const [state, formAction, isPending] = useActionState(
    createBrand,
    undefined,
  );

  return (
    <form action={formAction} className="flex items-end gap-3">
      <label className="flex flex-col gap-1">
        <span className="text-sm font-medium text-charcoal">
          New brand name
        </span>
        <input
          type="text"
          name="name"
          required
          className="rounded border border-charcoal/20 bg-warm-white px-4 py-2 text-charcoal"
        />
      </label>
      <button
        type="submit"
        disabled={isPending}
        className="rounded-full bg-terracotta px-5 py-2 text-sm font-medium text-white hover:bg-terracotta/90 disabled:opacity-60"
      >
        Add Brand
      </button>
      {state?.error && (
        <p className="text-sm text-terracotta">{state.error}</p>
      )}
    </form>
  );
}