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

const layoutQuestionProps: Omit<LayoutQuestionProps, "children"> = {
  headerProps: {
    onBack: fn(),
  },
  title: {
    children: "Тебе повезло!",
    align: "center",
  },
  subtitle: {
    children: "Ты получил специальную эксклюзивную скидку на 94%",
    align: "center",
  },
};

/** Reusable Coupon page Component */
const meta: Meta<typeof Coupon> = {
  title: "Templates/Coupon",
  component: Coupon,
  tags: ["autodocs"],
  parameters: {
    layout: "fullscreen",
  },
  args: {
    couponProps: {
      title: {
        children: "Special Offer",
      },
      offer: {
        title: {
          children: "94% OFF",
        },
        description: {
          children: "Одноразовая эксклюзивная скидка",
        },
      },
      promoCode: {
        children: "HAIR50",
      },
      footer: {
        children: (
          <>
            Скопируйте или нажмите <b>Continue</b>
          </>
        ),
      },
      onCopyPromoCode: fn(),
    },
    bottomActionButtonProps: {
      actionButtonProps: {
        children: "Continue",
        onClick: fn(),
      },
    },
  },
  argTypes: {
    bottomActionButtonProps: {
      control: { type: "object" },
    },
  },
  render: (args) => {
    return (
      <LayoutQuestion {...layoutQuestionProps}>
        <Coupon {...args} />
      </LayoutQuestion>
    );
  },
};

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

export const Default = {} satisfies Story;
