"use client";

import type { ComponentProps } from "react";
import { Button } from "@kandev/ui/button";
import { Tooltip, TooltipContent, TooltipTrigger } from "@kandev/ui/tooltip";
import { IconSparkles } from "@tabler/icons-react";
import { useTranslation } from "react-i18next";

type ReleaseNotesButtonProps = {
  hasUnseen: boolean;
  onClick: () => void;
  size?: ComponentProps<typeof Button>["size"];
};

export function ReleaseNotesButton({ hasUnseen, onClick, size = "icon" }: ReleaseNotesButtonProps) {
  const { t } = useTranslation();
  return (
    <Tooltip>
      <TooltipTrigger asChild>
        <Button variant="outline" size={size} onClick={onClick} className="cursor-pointer relative">
          <IconSparkles className="h-4 w-4" />
          {hasUnseen && (
            <span className="absolute -top-1 -right-1 h-2.5 w-2.5 rounded-full bg-primary border-2 border-background" />
          )}
          <span className="sr-only">{t("common:whatSNew")}</span>
        </Button>
      </TooltipTrigger>
      <TooltipContent>{t("common:whatSNew")}</TooltipContent>
    </Tooltip>
  );
}