import { Button } from "@/components/ui/button";
import { CheckCircle, ExternalLink, Link, Loader, Mail } from "lucide-react";

interface DonateSuccessProps {
  data: any;
}

const DonateSuccess = ({ data }: DonateSuccessProps) => {
  return (
    <div className="px-2 w-full">
      <div className="grid gap-6">
        <div className="flex flex-col items-center gap-2">
          <CheckCircle className="stroke-green-600 " size={50} />
          <div className="text-center">
            <h4>Thank You!</h4>
            <p>
              You just sent NGN 400,000,000 to Thdessdasdddsdss.....dsdsds .
            </p>
          </div>
          <div className="rounded bordr border-green-100 font-semibold p-2 flex items-center w-fit text-green-600 text-sm bg-green-50">
            Hailey Bruce <CheckCircle className="ml-1" size={16} />
          </div>
        </div>
        <div className="flex flex-col items-center gap-4">
          <h5 className="">Share Campaign</h5>
          <div className="flex items-center w-full mx-auto max-w-72 justify-between">
            <Button
              variant={"ghost"}
              className="rounded-full bg-neutral-50"
              size={"icon"}
            >
              <Mail className="icon !m-0" />
            </Button>
            <Button
              variant={"ghost"}
              className="rounded-full bg-neutral-50"
              size={"icon"}
            >
              <Link className="icon !m-0" />
            </Button>
            <Button
              variant={"ghost"}
              className="rounded-full bg-neutral-50"
              size={"icon"}
            >
              <ExternalLink className="icon !m-0" />
            </Button>
          </div>
        </div>

        <Button className="mt-4" size="lg">
          Done
        </Button>
      </div>
    </div>
  );
};

export default DonateSuccess;