"use client";

import { useActionState } from "react";
import { FormField } from "@/components/admin/FormField";
import { ImageUploadField } from "@/components/admin/ImageUploadField";
import type { TeamMemberFormState } from "@/app/(admin-group)/admin/team-members/actions";
import type { TeamMember } from "@/generated/prisma/client";

interface TeamMemberFormProps {
  action: (
    state: TeamMemberFormState,
    formData: FormData
  ) => Promise<TeamMemberFormState>;
  teamMember?: TeamMember;
  submitLabel: string;
}

export function TeamMemberForm({
  action,
  teamMember,
  submitLabel,
}: TeamMemberFormProps) {
  const [state, formAction, isPending] = useActionState<
    TeamMemberFormState,
    FormData
  >(action, undefined);

  return (
    <form action={formAction} className="space-y-5">
      <FormField
        label="Nama"
        name="name"
        defaultValue={teamMember?.name}
        error={state?.errors?.name?.[0]}
        required
      />

      <FormField
        label="Jabatan"
        name="role"
        defaultValue={teamMember?.role ?? ""}
        placeholder="cth. Travel Consultant"
      />

      <ImageUploadField
        name="image"
        label="Foto"
        defaultImageUrl={teamMember?.photoUrl}
      />

      <FormField
        label="Urutan Tampil"
        name="sortOrder"
        type="number"
        defaultValue={teamMember?.sortOrder ?? 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..." : submitLabel}
      </button>
    </form>
  );
}