import { CircleHelp } from 'lucide-react';
import { Button } from '@/components/ui/button';
import {
    Tooltip,
    TooltipContent,
    TooltipProvider,
    TooltipTrigger,
} from '@/components/ui/tooltip';
import { cn } from '@/lib/utils';

type TourReplayButtonProps = {
    buttonRef: React.RefObject<HTMLButtonElement | null>;
    hidden: boolean;
    onClick: () => void;
    showPulse: boolean;
};

export function TourReplayButton({
    buttonRef,
    hidden,
    onClick,
    showPulse,
}: TourReplayButtonProps) {
    if (hidden) {
        return null;
    }

    return (
        <TooltipProvider delayDuration={300}>
            <Tooltip>
                <TooltipTrigger asChild>
                    <Button
                        type="button"
                        variant="secondary"
                        className={cn(
                            'fixed right-4 bottom-4 z-[80] rounded-full shadow-lg',
                            showPulse && 'animate-pulse motion-reduce:animate-none',
                        )}
                        onClick={onClick}
                        aria-label="Start application tour"
                        data-tour="replay"
                        ref={buttonRef}
                    >
                        <CircleHelp />
                        <span className="hidden sm:inline">Take a tour</span>
                        {showPulse && (
                            <span className="absolute -top-0.5 -right-0.5 size-2.5 rounded-full bg-primary ring-2 ring-background" />
                        )}
                    </Button>
                </TooltipTrigger>
                <TooltipContent side="left">
                    Take a guided tour
                </TooltipContent>
            </Tooltip>
        </TooltipProvider>
    );
}