import { useTranslation } from "react-i18next";
import ForwardedIconComponent from "@/components/common/genericIconComponent";
import ShadTooltip from "@/components/common/shadTooltipComponent";
import { SimpleSidebarTrigger } from "@/components/ui/simple-sidebar";

interface PlaygroundButtonProps {
  hasIO: boolean;
}

const ButtonLabel = () => {
  const { t } = useTranslation();
  return <span className="font-normal text-mmd">{t("misc.playground")}</span>;
};

const DisabledButton = () => (
  <div
    className="relative inline-flex h-8 w-auto items-center justify-start gap-1.5 rounded px-2 text-sm font-normal cursor-not-allowed text-muted-foreground"
    data-testid="playground-btn-flow"
  >
    <ForwardedIconComponent name="Play" className="h-4 w-4" />
    <ButtonLabel />
  </div>
);

const PlaygroundButton = ({ hasIO }: PlaygroundButtonProps) => {
  const { t } = useTranslation();
  return hasIO ? (
    <SimpleSidebarTrigger>
      <ButtonLabel />
    </SimpleSidebarTrigger>
  ) : (
    <ShadTooltip content={t("misc.addChatInputOutputPlayground")}>
      <div>
        <DisabledButton />
      </div>
    </ShadTooltip>
  );
};

export default PlaygroundButton;
