import React from "react";
import { HandHeart, CreditCard } from "lucide-react";
import { GuideItem } from "@/components/shared/GuideItem";
import type { HelpContent } from "./types";

/** Help content for /dashboard/user/donate. */
export const dashboardUserDonateHelpContent: HelpContent = {
  title: "Donations help",
  subtitle: "Support an event or the ministry directly.",
  quickLinks: [
    { label: "My Payments", href: "/dashboard/user/payments", icon: CreditCard },
  ],
  tabs: [
    {
      key: "overview",
      label: "Making a donation",
      icon: HandHeart,
      content: (
        <div className="space-y-4">
          <p>Pick an event to support and an amount (minimum R15), then you&apos;ll be redirected to a secure Yoco checkout to complete payment.</p>
          <GuideItem icon={HandHeart} title="Not tied to a registration" tone="rose">
            A donation is separate from paying for your own ticket — it&apos;s a direct contribution, and it isn&apos;t required to register for or attend an event.
          </GuideItem>
        </div>
      ),
    },
  ],
};