import { useState } from "react";
import { __ } from "@wordpress/i18n";
import UpsellModal from "./UpsellModal";

export function SidebarUpsell() {
    const [isShown, setIsShown] = useState(false);
    return (
        <>
            <div
                onClick={() => setIsShown(true)}
                className="tableberg-upsell-inspector-notice-wrapper"
            >
                <div
                    className={"tableberg-upsell-inspector-notice"}
                    title={__("click for more info", "tableberg")}
                >
                    <div className={"tableberg-upsell-notice-icon-container"}>
                        <img
                            alt={__("Tableberg logo", "tableberg")}
                            src={tablebergAdminMenuData?.assets.logoTransparent}
                        />
                    </div>
                    <div className={"tableberg-upsell-notice"}>
                        <span>
                            <b>{__("Tableberg", "tableberg")}</b>{" "}
                            {__("has", "tableberg")}{" "}
                            <b>{__("PRO", "tableberg")}</b>
                            <br /> enhancements.
                        </span>
                    </div>
                </div>
            </div>
            {isShown && <UpsellModal onClose={() => setIsShown(false)} />}
        </>
    );
}