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

/** Help content for /dashboard/user/forms. */
export const userFormsHelpContent: HelpContent = {
  title: "Attendee forms",
  subtitle: "Fill in the details required for your tickets.",
  tabs: [
    {
      key: "overview",
      label: "Overview",
      icon: FileText,
      content: (
        <div className="space-y-4">
          <p>You&apos;ll see one form to fill in per main ticket on your registration. Already-submitted forms are shown read-only above the remaining ones.</p>
          <div className="space-y-4">
            <GuideItem icon={CheckCircle2} title="Submitting" tone="brand">
              Submit is enabled once every required field across all remaining forms is filled in.
            </GuideItem>
            <GuideItem icon={Save} title="Save for later" tone="green">
              Not ready to finish? Save your progress as a draft and come back to complete it before the event.
            </GuideItem>
          </div>
        </div>
      ),
    },
  ],
};