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
      title="My chosen family and I would really appreciate it if you could send some financial support our way! 🖤"
    >
      <div className="p-4 space-y-4">
        <p className="text-lg md:text-2xl text-center text-alice-werefox-red-dark dark:text-alice-werefox-red-light">
          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/alice_werefox/?hidefeed=true&widget=true&embed=true&preview=true"
        />
      </div>
    </WCard>
  );
}
