/* eslint-disable no-console */
import { INITIAL_VIEWPORTS } from "@storybook/addon-viewport";
import type { Meta, StoryObj } from "@storybook/react";

import { ThemeProviderDecorators } from "@/storybook/Decorator";

import { UsageMasterpassBanner } from "./usage-masterpass-banner";

const meta = {
  title: "Widgets/Payment/UsageMasterpassBanner",
  component: UsageMasterpassBanner,
  tags: ["autodocs"],
  decorators: ThemeProviderDecorators,
  parameters: {
    // 👇 The viewports object from the Essentials addon
    viewport: {
      // 👇 The viewports you want to use
      viewports: INITIAL_VIEWPORTS,
      // 👇 Your own default viewport
    },
  },
} satisfies Meta<typeof UsageMasterpassBanner>;

export default meta;

type Story = StoryObj<typeof UsageMasterpassBanner>;

export const DefaultUsageMasterpassBanner: Story = {
  render: () => {
    return (
      <UsageMasterpassBanner
        phoneNumber="+90 (541) 690 15 11"
        onOk={() => console.log("onOk")}
        onCancel={() => console.log("onCancel")}
      />
    );
  },
};