import Iframe from "react-iframe";

export default function KofiDonationWidget({ title, url }) {
  return (
    <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>{title}</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={url}
              height="680"
            ></Iframe>
          </div>
        </div>
      </details>
    </div>
  );
}