import React, { useState } from "react";
import { ComponentStory, ComponentMeta } from "@storybook/react";

import { RooInfoPanel } from "../ui-components/RooInfoPanel";
import { RooInfoPanelInfo } from "../ui-components/RooInfoPanel/RooInfoPanelInfo";

export default {
  title: "RooInfoPanel",
  component: RooInfoPanel,
} as ComponentMeta<typeof RooInfoPanel>;

const Template: ComponentStory<typeof RooInfoPanel> = (args) => {
  const [isShowPanel, setIsShowPanel] = useState(true);
  const onClosePanel = () => {
    setIsShowPanel(false);
  };
  return (
    <RooInfoPanel
      {...args}
      isShowPanel={isShowPanel}
      onClosePanel={onClosePanel}
    />
  );
};
const InfoTemplate: ComponentStory<typeof RooInfoPanel> = () => (
  <>
    <RooInfoPanelInfo />
  </>
);

export const CheckboxDetails = InfoTemplate.bind({});

export const InfoPanel = Template.bind({});
InfoPanel.args = {
  title: "Title",
  isShowPanel: true,
};
