import { MARKETING_PLANE_ONE_PAGE_LINK } from "@buzzwaretech/constants";
import { getButtonStyling } from "@buzzwaretech/propel/button";
import { cn } from "@buzzwaretech/utils";

type Props = {
  className?: string;
};

export function BulkOperationsUpgradeBanner(props: Props) {
  const { className } = props;

  return (
    <div
      className={cn(
        "sticky bottom-0 left-0 z-[2] grid h-20 place-items-center px-3.5",
        className,
      )}
    >
      <div className="flex h-14 w-full items-center justify-between gap-2 rounded-md border-[0.5px] border-accent-strong/50 bg-accent-primary/10 px-3.5 py-4">
        <p className="font-medium text-accent-primary">
          Change state, priority, and more for several work items at once. Save
          three minutes on an average per operation.
        </p>
        <a
          href={MARKETING_PLANE_ONE_PAGE_LINK}
          target="_blank"
          rel="noopener noreferrer"
          className={cn(getButtonStyling("primary", "base"), "flex-shrink-0")}
        >
          Upgrade to One
        </a>
      </div>
    </div>
  );
}