import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input-with-control";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select-with-control";
import { PaymentMethod } from "@/types/custom/campaigns";
import { CheckCircle, Coins, Landmark } from "lucide-react";
import { Control } from "react-hook-form";

interface DonateStep1Props {
  control: Control<any>;
  isSubmitting: boolean;
  nextStep: (paymentMethod: PaymentMethod) => void;
}

const DonateStep1 = ({ isSubmitting, nextStep }: DonateStep1Props) => {
  const handleNextStep = (paymentMethod: PaymentMethod) => () => {
    if (isSubmitting) return;
    nextStep(paymentMethod);
  };

  return (
    <div className="px-2 w-full">
      <h5 className="mb-5 text-center">Select Payment Method</h5>
      <div className="grid gap-4">
        <div
          className="flex items-center gap-3"
          role="button"
          onClick={handleNextStep(PaymentMethod.CRYPTO)}
        >
          <span className="border rounded p-2">
            <Coins className="icon !m-0" />
          </span>
          <p>Donate via crypto</p>
        </div>
        <div
          className="flex items-center gap-3"
          role="button"
          onClick={handleNextStep(PaymentMethod.BANK)}
        >
          <span className="border rounded p-2">
            <Landmark className="icon !m-0" />
          </span>
          <p>Donate via bank</p>
        </div>
      </div>
    </div>
  );
};

export default DonateStep1;