import WCard from "./werefox-card.js";
import SButton from "./support-button.js";
import KWidget from "./kofi-donation-widget.js";

export default function SupportBlock({ support }) {
  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>
        {Object.keys(support).map((sup) => (
          <SButton
            key={sup}
            title={support[sup].title}
            alt={support[sup].alt}
            src={support[sup].src}
            url={support[sup].url}
          />
        ))}
        <KWidget
          title="Open/Close Ko-fi Donation Widget"
          url="https://ko-fi.com/alexis_werefox/?hidefeed=true&widget=true&embed=true&preview=true"
        />
      </div>
    </WCard>
  );
}