import { Panel } from "./Panel";

export default {
  title: "SkynetLibrary/Panel",
  component: Panel,
  decorators: [
    (Story) => (
      <div className="inset-0 bg-palette-100 p-6">
        <div style={{ maxWidth: 800 }}>
          <Story />
        </div>
      </div>
    ),
  ],
};

const SampleContent = () => (
  <>
    <p>This is the first paragraph</p>
    <p>This is the second paragraph</p>
    <p>This is the third paragraph</p>
  </>
);

const Template = (args) => (
  <Panel {...args}>
    <SampleContent />
  </Panel>
);

export const RawPanel = Template.bind({});
RawPanel.args = {};

export const TitledPanel = Template.bind({});
TitledPanel.args = {
  title: "Latest activity",
};

export const InlinePanelsExample = () => (
  <div className="grid gap-4 grid-flow-col auto-cols-fr">
    <Panel title="Upload" className="w-50">
      <SampleContent />
    </Panel>
    <Panel title="Usage" className="w-50">
      <SampleContent />
    </Panel>
  </div>
);

export const FullWidthPanelsExample = () => (
  <>
    <Panel title="Latest activity">
      <SampleContent />
    </Panel>
    <Panel title="Payment history">
      <SampleContent />
    </Panel>
  </>
);

export const CustomPanelBackground = Template.bind({});
CustomPanelBackground.args = {
  className: "bg-red-500",
  title: "Background below should be red",
};