import { Meta, StoryObj } from "@storybook/nextjs-vite";
import { LayoutQuestion } from "./LayoutQuestion";
import { fn } from "storybook/test";

/** Reusable LayoutQuestion page Component */
const meta: Meta<typeof LayoutQuestion> = {
  title: "Layout/LayoutQuestion",
  component: LayoutQuestion,
  tags: ["autodocs"],
  parameters: {
    layout: "fullscreen",
  },
  args: {
    headerProps: {
      progressProps: {
        value: (5 / 15) * 100,
        label: "5 of 15",
        className: "max-w-[198px]",
      },
      onBack: fn(),
    },
    title: {
      children: "Which best represents your hair loss and goals?",
    },
    subtitle: {
      children: "Let's personalize your hair care journey",
    },
    children: (
      <div className="w-full flex flex-col justify-center items-center mt-[30px]">
        Children
      </div>
    ),
  },
  argTypes: {},
};

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

export const Default = {} satisfies Story;
