"use client";

import { useActionState, useEffect } from "react";
import { toast } from "sonner";
import { Button } from "@/components/ui/button";
import { baslatOdeme, type OdemeBaslatDurum } from "./actions";

export function SatinAlForm({
  urun,
  label,
  vurgulu = false,
}: {
  urun: "paket" | "topup";
  label: string;
  vurgulu?: boolean;
}) {
  const [state, formAction, pending] = useActionState<
    OdemeBaslatDurum,
    FormData
  >(baslatOdeme, undefined);

  useEffect(() => {
    if (state?.error) toast.error(state.error);
  }, [state]);

  return (
    <form action={formAction}>
      <input type="hidden" name="urun" value={urun} />
      <Button
        type="submit"
        disabled={pending}
        className={
          vurgulu
            ? "h-12 w-full cursor-pointer bg-orange-500 px-8 text-white transition-colors duration-200 hover:bg-orange-600"
            : "h-11 w-full cursor-pointer"
        }
        variant={vurgulu ? "default" : "outline"}
      >
        {pending ? "Ödeme sayfasına yönlendiriliyorsun…" : label}
      </Button>
    </form>
  );
}