import { useState } from "react";
import type { Meta, StoryObj } from "@storybook/react-vite";
import { generateFlagConfig } from "~/lib/flag-generator";
import type { FlagConfig } from "~/lib/flag-types";
import { FlagBuilder } from "./FlagBuilder";

const meta: Meta<typeof FlagBuilder> = {
  title: "UI/FlagBuilder",
  component: FlagBuilder,
  parameters: { layout: "padded" },
};

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

function FlagBuilderStory() {
  const [config, setConfig] = useState<FlagConfig>(generateFlagConfig("story-user"));
  return <FlagBuilder value={config} seed="story-user" onChange={setConfig} />;
}

export const Default: Story = {
  render: () => <FlagBuilderStory />,
};