import React from "react";
import { Meta, Story } from "@storybook/react";
import { AtomTooltip, ITooltipProps } from "native/atoms/Tooltip";
import { AtomCaption } from "native/atoms/Typography/Caption";

const meta: Meta = {
  title: "React Native/atoms/Tooltip/TooltipText",
  component: AtomTooltip,
  argTypes: {
    content: {
      control: false,
      table: {
        disabled: true,
      },
    },
  },
  parameters: {
    controls: { expanded: true },
  },
};

export default meta;

const TemplateTooltip: Story<ITooltipProps> = (props) => {
  return (
    // Custom Container to prevent Storybook to crop tooltip
    <div
      style={{
        height: "120px",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
      }}
    >
      <AtomTooltip {...props}>
        <AtomCaption
          align="center"
          size={"xlarge"}
          text={"Hover here for tooltip"}
        />
      </AtomTooltip>
    </div>
  );
};

export const Tooltip = TemplateTooltip.bind({});
Tooltip.args = {
  text: "Tooltip Text",
};
