import { Info } from 'lucide-react';

import { Button } from '@kit/ui/button';
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from '@kit/ui/tooltip';

export function ButtonTooltip({
  content,
  className,
}: {
  content?: string;
  className?: string;
}) {
  if (!content) return null;
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger asChild>
          <Button className={className} variant="outline" size="icon">
            <Info className="size-4 cursor-pointer" />
          </Button>
        </TooltipTrigger>
        <TooltipContent>{content}</TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
}