import { ComingSoonBadge, ProBadge } from "@/components/plan-badges";
import { Button } from "@/components/ui/button";
import { IS_PRO, PRO_URL } from "@/lib/env";
import { __ } from "@wordpress/i18n";
import PreviewCards from "./PreviewCards";
import { PRO_CONTENT } from "./content";

/**
 * Preview of a tab that isn't built yet (Analytics): what it will offer,
 * with every control disabled.
 */
const ProPreview = ({ tab }) => {
  const cards = PRO_CONTENT[tab.key] ?? [];

  return (
    <div className="ino:flex ino:max-w-3xl ino:flex-col ino:gap-6">
      <div
        role="note"
        className="ino:flex ino:flex-wrap ino:items-center ino:justify-between ino:gap-3 ino:rounded-xl ino:border ino:border-border ino:bg-card ino:px-5 ino:py-3"
      >
        <span className="ino:flex ino:items-center ino:gap-2 ino:text-sm">
          {tab.later ? <ComingSoonBadge /> : <ProBadge />}
          {tab.later
            ? __(
                "Planned for an upcoming Better Compare Pro update.",
                "product-comparison-for-woocommerce",
              )
            : __(
                "Part of Better Compare Pro. A preview of what you can turn on.",
                "product-comparison-for-woocommerce",
              )}
        </span>
        {!IS_PRO && (
          <Button
            variant="outline"
            size="sm"
            render={<a href={PRO_URL} target="_blank" rel="noreferrer" />}
          >
            {__("See what Pro adds", "product-comparison-for-woocommerce")}
          </Button>
        )}
      </div>
      <PreviewCards cards={cards} tabKey={tab.key} />
    </div>
  );
};

export default ProPreview;