import { Play, Sparkles } from "lucide-react";
import { getOnboardingResumeStep } from "./model-onboarding-state";

interface OnboardingResumeCardProps {
  /** Called when the user clicks "Continue onboarding" */
  onResume: () => void;
}

/**
 * A banner/card that appears when a user has previously started onboarding
 * but dismissed the modal without completing. It allows them to resume
 * from where they left off.
 */
export function OnboardingResumeCard({ onResume }: OnboardingResumeCardProps) {
  const resumeStep = getOnboardingResumeStep();

  // Should not render if no resumable state exists
  if (!resumeStep) {
    return null;
  }

  return (
    <section
      className="onboarding-resume-card"
      role="region"
      aria-label="Resume onboarding"
    >
      <div className="onboarding-resume-card__main">
        <div className="onboarding-resume-card__icon" aria-hidden="true">
          <Sparkles size={20} />
        </div>
        <div className="onboarding-resume-card__content">
          <h2 className="onboarding-resume-card__title">Continue Setup</h2>
          <p className="onboarding-resume-card__description">
            You&apos;re on the <strong>{resumeStep.label}</strong> step. Continue where you left off to complete your dashboard setup.
          </p>
        </div>
      </div>
      <div className="onboarding-resume-card__actions">
        <button
          className="onboarding-resume-card__resume-btn"
          onClick={onResume}
        >
          <Play size={14} aria-hidden="true" />
          <span>Continue onboarding</span>
        </button>
      </div>
    </section>
  );
}