"use client";

import { useActionState } from "react";
import { FormField } from "@/components/admin/FormField";
import { ImageUploadField } from "@/components/admin/ImageUploadField";
import { createHeroImage } from "../actions";

export default function CreateHeroImagePage() {
  const [state, formAction, isPending] = useActionState(
    createHeroImage,
    undefined
  );

  return (
    <div>
      <h1 className="text-2xl font-semibold text-heading">
        Tambah Gambar Hero
      </h1>
      <p className="mt-1 text-sm text-body">
        Gambar ini akan tampil di slider hero halaman Home.
      </p>

      <div className="mt-6 rounded-2xl bg-white p-8 shadow-sm">
        <form action={formAction} className="space-y-5">
          <ImageUploadField name="image" label="Gambar" required />

          <FormField
            label="Urutan Tampil"
            name="sortOrder"
            type="number"
            defaultValue={0}
          />

          {state?.message && (
            <p className="rounded-lg bg-red-50 px-3 py-2 text-sm text-red-600">
              {state.message}
            </p>
          )}

          <button
            type="submit"
            disabled={isPending}
            className="rounded-full bg-merah-ranata px-6 py-2.5 text-sm font-semibold text-white transition hover:bg-merah-hover disabled:opacity-60"
          >
            {isPending ? "Menyimpan..." : "Simpan Gambar"}
          </button>
        </form>
      </div>
    </div>
  );
}