import type { Meta, StoryObj } from "@storybook/react";
import { CustomizationPanel } from "../.storybook/CustomizationPanel";
import React, { useState } from "react";

const meta: Meta<typeof CustomizationPanel> = {
  title: "Customization/Customization Panel",
  component: CustomizationPanel,
  parameters: {
    layout: "padded",
  },
};

export default meta;
type Story = StoryObj<typeof CustomizationPanel>;

export const Panel: Story = {
  render: () => {
    const [active, setActive] = useState(true);
    return (
      <div>
        <button
          onClick={() => setActive(!active)}
          style={{
            marginBottom: "20px",
            padding: "10px 20px",
            fontSize: "14px",
            cursor: "pointer",
          }}
        >
          {active ? "Hide" : "Show"} Customization Panel
        </button>
        <CustomizationPanel active={active} />
      </div>
    );
  },
};