import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input-with-control";
import { Control } from "react-hook-form";
import { Loader } from "lucide-react";
import FileUpload from "@/components/App/Shared/FileUpload";

interface DonateStep3Props {
  control: Control<any>;
  isValid: boolean;
  isDirty: boolean;
  isSubmitting: boolean;
}

const DonateStep3 = ({
  control,
  isValid,
  isDirty,
  isSubmitting,
}: DonateStep3Props) => {
  return (
    <div className="px-2 w-full">
      <div className="grid gap-4">
        <div className="grid gap-1">
          <p className="text-sm">Confirm Pin</p>
          <Input
            name="pin"
            placeholder="Enter Pin"
            type="text"
            disabled={isSubmitting}
            control={control}
          />
        </div>

        <Button
          disabled={!isValid || !isDirty || isSubmitting}
          className="mt-4"
          size="lg"
        >
          {isSubmitting && <Loader className="mr-2 h-4 w-4 animate-spin" />}
          Done
        </Button>
      </div>
    </div>
  );
};

export default DonateStep3;