import { Button } from "../components/Button";
import { Tooltip, TooltipContent } from "../components/Tooltip";

export default {
  title: "React/Tooltip",
  component: Tooltip,
  parameters: {
    layout: "centered",
  },
};

export const Default = () => {
  return (
    <Tooltip>
      <TooltipContent>
        <p className="whitespace-nowrap">Hello World!</p>
      </TooltipContent>
      <Button>Hover me</Button>
    </Tooltip>
  );
};

export const Top = () => {
  return (
    <Tooltip position="top">
      <TooltipContent>
        <p className="whitespace-nowrap">Hello World!</p>
      </TooltipContent>
      <Button>Hover me</Button>
    </Tooltip>
  );
};

export const Bottom = () => {
  return (
    <Tooltip position="bottom">
      <TooltipContent>
        <p className="whitespace-nowrap">Hello World!</p>
      </TooltipContent>
      <Button>Hover me</Button>
    </Tooltip>
  );
};

export const Left = () => {
  return (
    <Tooltip position="left">
      <TooltipContent>
        <p className="whitespace-nowrap">Hello World!</p>
      </TooltipContent>
      <Button>Hover me</Button>
    </Tooltip>
  );
};

export const Right = () => {
  return (
    <Tooltip position="right">
      <TooltipContent>
        <p className="whitespace-nowrap">Hello World!</p>
      </TooltipContent>
      <Button>Hover me</Button>
    </Tooltip>
  );
};