import { commonProps } from "../../utils/storybook";
import { IconButton } from "../icon-button";
import { Icons } from "../icons";
import { Flex } from "../flex";
import { Text } from "../text";
import { Tooltip } from ".";
import type { StoryObj, Meta } from "@storybook/react";

const meta: Meta<typeof Tooltip> = {
  title: "Tooltip",
  component: Tooltip,
  tags: ["autodocs"],
  argTypes: {
    ...commonProps,
  },
};

export default meta;

type Story = StoryObj<typeof Tooltip>;

export const Default: Story = {
  render: (args) => (
    <Flex align="center">
      <Tooltip {...args} />
      <Text variant="body5" css={{ ml: "$2", color: "$light-off-white" }}>
        Hover Me
      </Text>
    </Flex>
  ),
};
Default.args = {
  trigger: <IconButton Icon={<Icons.Close />} />,
  children: "Tooltip Message",
};