"use client";

import * as React from "react";
import { CircleHelp } from "lucide-react";

import { Button } from "@/components/ui/button";
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@/components/ui/tooltip";
import { cn } from "@/lib/utils";

type TutorialHelpButtonProps = {
  onClick: () => void;
  className?: string;
  /** When true, show a subtle attention ring (incomplete onboarding). */
  attention?: boolean;
};

export function TutorialHelpButton({
  onClick,
  className,
  attention = false,
}: TutorialHelpButtonProps) {
  return (
    <Tooltip>
      <TooltipTrigger asChild>
        <Button
          type="button"
          variant="outline"
          size="icon"
          className={cn(
            "relative size-8 shrink-0",
            attention && "border-primary/40 bg-primary/5",
            className,
          )}
          aria-label="Tutorial help"
          data-tutorial="help"
          onClick={onClick}
        >
          <CircleHelp className="size-4" />
          {attention ? (
            <span className="absolute -top-0.5 -right-0.5 size-2 rounded-full bg-primary ring-2 ring-background" />
          ) : null}
        </Button>
      </TooltipTrigger>
      <TooltipContent side="bottom">Tutorial</TooltipContent>
    </Tooltip>
  );
}