import { Button } from "@/components/ui/button";
import { __ } from "@wordpress/i18n";
import { Link } from "react-router";

/**
 * Reminder to run the setup wizard, until it's finished or skipped (read
 * live: the wizard sets `window.PCFW.wizard_done` when it completes).
 */
const SetupBanner = () =>
  window.PCFW?.wizard_done ? null : (
    <div className="ino:mb-6 ino:flex ino:flex-wrap ino:items-center ino:justify-between ino:gap-3 ino:rounded-xl ino:border ino:border-primary/30 ino:bg-primary/5 ino:px-5 ino:py-3">
      <span className="ino:text-sm">
        {__(
          "Set up comparison in three short steps: placement, rows and look.",
          "product-comparison-for-woocommerce",
        )}
      </span>
      <Button render={<Link to="/wizard" />}>
        {__("Start setup", "product-comparison-for-woocommerce")}
      </Button>
    </div>
  );

export default SetupBanner;