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, CircleAlert } from "lucide-react";
import React from "react";
import { Control } from "react-hook-form";

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

const PayWithCrypto: React.FC<PayWithCryptoProps> = ({
  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 Crypto</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="amount"
              placeholder="Amount"
              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 className="flex text-sm items-center font-bold text-neutral-700">
              <CircleAlert className="mr-1" size={16} />
              1BTC = NGN 100,000,000
            </div>
          </div>

          <div className="grid gap-1">
            <div className="rounded text-neutral-700 divide-y p-2 flex flex-col items-start text-sm bg-blue-50">
              <div className="flex justify-between py-2 items-center w-full">
                <p className="">Amount (Includes Transaction Fee)</p>
                <p className="font-bold">NGN 4,000,000</p>
              </div>
              <div className="flex justify-between py-2 items-center w-full">
                <p className="">Unit Price</p>
                <p className="flex text-sm items-center font-bold">
                  <CircleAlert className="mr-1" size={16} />
                  1BTC = NGN 100,000,000
                </p>
              </div>
              <div className="flex justify-between py-2 items-center w-full">
                <p className="">Network Fee</p>
                <p className="font-bold">NGN 400</p>
              </div>
            </div>
          </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 PayWithCrypto;