import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input-with-control";
import { ScrollArea } from "@/components/ui/scroll-area";
import { PaymentMethod } from "@/types/custom/campaigns";
import { CheckCircle } from "lucide-react";
import React from "react";
import { Control } from "react-hook-form";

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

const PayWithBank: React.FC<PayWithBankProps> = ({
  control,
  isSubmitting,
  nextStep,
}) => {
  return (
    <div className="max-h-[60vh] overflow-y-auto relative no-scrollbar">
      <div className="h-full">
        <h5 className="text-center mb-5">Pay With Bank</h5>
        <div className="grid gap-4">
          <div className="grid gap-1">
            <p className="text-sm">Wallet Address</p>
            <Input
              name="title"
              placeholder="Campaign title"
              type="text"
              disabled={isSubmitting}
              control={control}
            />
            <div className="rounded border border-green-100 font-semibold p-2 flex items-center text-green-600 text-sm bg-green-50">
              Hailey Bruce <CheckCircle className="ml-1" size={16} />
            </div>
          </div>
          <div className="grid gap-1">
            <p className="text-sm">Donation Amount</p>
            <Input
              name="location"
              placeholder="Location"
              type="text"
              disabled={isSubmitting}
              control={control}
              startIcon={"NGN"}
              className="pl-14"
            />
          </div>
          <div className="grid gap-1">
            <div className="rounded border border-blue-100 p-2 flex flex-col items-start text-sm bg-blue-50">
              <p className=" font-semibold">0.00445</p>
              <p className="">NGN 4,000,000</p>
            </div>
          </div>

          <div className="grid gap-1">
            <p className="text-sm">Fundraising Deadline</p>
            <Input
              name="deadline"
              placeholder="Fundraising deadline"
              type="text"
              disabled={isSubmitting}
              control={control}
              endIcon={<span className="text-gray-500">Days</span>}
            />
          </div>
          <div className="mt-4 pt-2 bg-white inset-x-0 bottom-0 sticky">
            <Button
              className="w-full"
              size="lg"
              type="button"
              onClick={nextStep}
            >
              Next
            </Button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default PayWithBank;