import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from '~/components/ui/tooltip';
import { Button } from '~/components/ui/button';
import { Text } from '~/components/ui/text';

export function Example() {
  return (
    <Tooltip>
      <TooltipTrigger asChild>
        <Button variant="outline">
          <Text>Hover me</Text>
        </Button>
      </TooltipTrigger>
      <TooltipContent>
        <Text>This is a tooltip</Text>
      </TooltipContent>
    </Tooltip>
  );
}

import { Icon } from '~/components/ui/icon';
import { Info } from 'lucide-react-native';

export function IconTooltip() {
  return (
    <Tooltip>
      <TooltipTrigger asChild>
        <Button variant="ghost" size="icon">
          <Icon as={Info} size={16} />
        </Button>
      </TooltipTrigger>
      <TooltipContent>
        <Text>More information about this feature.</Text>
      </TooltipContent>
    </Tooltip>
  );
}

import { useState } from 'react';

export function ControlledTooltip() {
  const [open, setOpen] = useState(false);

  return (
    <Tooltip open={open} onOpenChange={setOpen}>
      <TooltipTrigger asChild>
        <Button variant="outline">
          <Text>Controlled</Text>
        </Button>
      </TooltipTrigger>
      <TooltipContent>
        <Text>This tooltip is controlled.</Text>
      </TooltipContent>
    </Tooltip>
  );
}