import { LockIcon } from "@buzzwaretech/propel/icons";
import { Tooltip } from "@buzzwaretech/propel/tooltip";

export function LockedComponent(props: { toolTipContent?: string }) {
  const { toolTipContent } = props;
  const lockedComponent = (
    <div className="flex h-7 flex-shrink-0 items-center gap-2 rounded-full bg-layer-1 px-3 py-0.5 text-11 font-medium text-tertiary">
      <LockIcon className="h-3 w-3" />
      <span>Locked</span>
    </div>
  );

  return (
    <>
      {toolTipContent ? (
        <Tooltip tooltipContent={toolTipContent}>{lockedComponent}</Tooltip>
      ) : (
        <>{lockedComponent}</>
      )}
    </>
  );
}