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

import { InfoPanel } from "../ui-components/InfoPanel";
import { InfoPanelInfo } from "../ui-components/InfoPanel/InfoPanelInfo";

export default {
  title: "Containers/InfoPanel",
  component: InfoPanel,
} as ComponentMeta<typeof InfoPanel>;

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

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

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