interface Props {
  onSkip: () => void;
}

export default function SetupWizard({ onSkip }: Props) {
  return (
    <div className="vr-max-w-lg vr-mx-auto vr-mt-8">
      <div className="vr-bg-white vr-rounded-2xl vr-border vr-border-gray-200 vr-shadow-lg vr-overflow-hidden">
        {/* Content */}
        <div className="vr-text-center vr-px-10 vr-py-10">
          <div
            className="vr-w-16 vr-h-16 vr-rounded-2xl vr-flex vr-items-center vr-justify-center vr-mx-auto vr-mb-6"
            style={{ background: "linear-gradient(135deg, #E03058, #c41d45)" }}
          >
            <i className="fa-solid fa-rocket vr-text-white vr-text-2xl" />
          </div>

          <h2 className="vr-text-xl vr-font-bold vr-text-gray-900 vr-mb-3">
            Welcome to Viraly
          </h2>
          <p className="vr-text-sm vr-text-gray-500 vr-leading-relaxed vr-max-w-sm vr-mx-auto">
            Connect your WordPress site to Viraly to schedule social media
            posts, auto-share blog articles, and manage all your profiles
            in one place.
          </p>
        </div>

        {/* Actions */}
        <div className="vr-px-10 vr-pb-8 vr-flex vr-gap-3">
          <button
            onClick={onSkip}
            className="vr-flex-1 vr-py-3 vr-rounded-lg vr-text-sm vr-font-medium vr-text-gray-500 vr-bg-gray-100 hover:vr-bg-gray-200 vr-transition-colors vr-border-0 vr-cursor-pointer"
          >
            Skip
          </button>
          <button
            onClick={() => {
              window.location.href = viralyWP.connectUrl;
            }}
            className="vr-flex-1 vr-py-3 vr-rounded-lg vr-text-sm vr-font-semibold vr-text-white vr-bg-primary-600 hover:vr-bg-primary-700 vr-transition-colors vr-border-0 vr-cursor-pointer"
          >
            Connect to Viraly
          </button>
        </div>
      </div>

      <p className="vr-text-center vr-text-gray-400 vr-text-xs vr-mt-4">
        Need help? Visit{" "}
        <a
          href="https://viraly.io"
          target="_blank"
          className="vr-text-primary-600 hover:vr-underline"
        >
          viraly.io
        </a>
      </p>
    </div>
  );
}