import Link from "next/link";
import WCard from "./werefox-card.js";
import Iframe from "react-iframe";

export default function SupportBlock() {
  return (
    <WCard
      innerText="I would sincerely appreciate if you would throw some financial
        support my way!! 💙"
    >
      <div className="p-4 space-y-4">
        <p className="text-lg md:text-2xl text-center text-werefox-blue-dark dark:text-werefox-blue">
          You could support me through Patreon, Ko-fi, or Liberapay
        </p>
        <div className="w-full justify-center flex">
          <Link href="https://www.patreon.com/bePatron?u=16333959">
            <a target="_blank">
              <p className="rounded-lg pt-2 pb-2 pl-4 pr-4 w-full w-max-60 ring-2 ring-werefox-grey dark:ring-werefox-grey-darker text-lg text-center text-werefox-grey-darker dark:text-werefox-grey-lightest bg-werefox-blue dark:bg-werefox-blue-dark transition hover:bg-werefox-blue-light dark:hover:bg-werefox-blue-darker">
                <span>
                  <img
                    alt="Subscribe to Alexis' Patreon"
                    src="/images/patreon_logo.png"
                    className="inline-flex h-6"
                  ></img>
                </span>{" "}
                Become a Patron!
              </p>
            </a>
          </Link>
        </div>
        <div className="w-full justify-center flex">
          <Link href="https://ko-fi.com/O5O61UAY1">
            <a target="_blank">
              <p className="rounded-lg pt-2 pb-2 pl-4 pr-4 w-full w-max-60 ring-2 ring-werefox-grey dark:ring-werefox-grey-darker text-lg text-center text-werefox-grey-darker dark:text-werefox-grey-lightest bg-werefox-blue dark:bg-werefox-blue-dark transition hover:bg-werefox-blue-light dark:hover:bg-werefox-blue-darker">
                <span>
                  <img
                    alt="Buy Alexis a Coffee"
                    src="/images/kofi_logo.png"
                    className="inline-flex w-6 pb-1"
                  ></img>
                </span>{" "}
                Buy me a Coffee!
              </p>
            </a>
          </Link>
        </div>
        <div className="w-full justify-center flex">
          <Link href="https://liberapay.com/alexis_werefox/donate">
            <a
              target="_blank"
              className="rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker"
            >
              <img
                alt="Donate using Liberapay"
                src="/images/liberapay_donate.svg"
                className="inline-flex h-10 filter transition hover:brightness-125"
              />
            </a>
          </Link>
        </div>
        <div className="pb-6 flex justify-center">
          <details className="rounded-lg p-1 overflow-auto">
            <summary className="p-2 pl-4 pr-4 rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker text-md text-center text-werefox-grey-darker dark:text-werefox-grey-lighter bg-werefox-blue dark:bg-werefox-blue-dark transition hover:bg-werefox-blue-light dark:hover:bg-werefox-blue-darker">
              <strong>Open/Close Ko-fi Donation Widget</strong>
            </summary>
            <div className="pt-2">
              <div className="rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker overflow-auto">
                <Iframe
                  className="rounded-lg w-96 min-w-96"
                  url="https://ko-fi.com/alexis_werefox/?hidefeed=true&widget=true&embed=true&preview=true"
                  height="680"
                ></Iframe>
              </div>
            </div>
          </details>
        </div>
      </div>
    </WCard>
  );
}