import { ComponentMeta, ComponentStory } from "@storybook/react";
import { Col, Row } from "antd";
import React from "react";
import { Button, Tooltip } from "../Starship";
import "../Styles/index.scss";

// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
export default {
  title: "Example/Tooltip",
  component: Tooltip,

  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
} as ComponentMeta<typeof Tooltip>;

// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
const Template: ComponentStory<typeof Tooltip> = (args: any) => {
  return (
    <>
      {/* primary button only text */}

      <Row
        gutter={[16, 16]}
        style={{ padding: "16px" }}
        justify={"center"}
        align={"middle"}
      >
        <Col style={{display: "flex", flexFlow: "column", gap: "20px"}}>
          <Tooltip {...args} overlay={<>hello this is tool tip</>} placement="top">
            <em>tool tip</em>
          </Tooltip>

          <Tooltip {...args} overlay={<>hello this is tool tip</>} placement="left">
            <em>tool tip</em>
          </Tooltip>

          <Tooltip {...args} overlay={<>hello this is tool tip</>} placement="bottom">
            <em>tool tip</em>
          </Tooltip>

          <Tooltip {...args} overlay={<>hello this is tool tip</>} placement="right">
            <em>tool tip</em>
          </Tooltip>
        </Col>
      </Row>
      {/* primary button only text */}
    </>
  );
};

export const StarshipTooltip = Template.bind({});
// More on args: https://storybook.js.org/docs/react/writing-stories/args
StarshipTooltip.args = { title: "Starship Tooltip" };
