/* eslint-disable react-hooks/rules-of-hooks */
import { INITIAL_VIEWPORTS } from "@storybook/addon-viewport";
import type { Meta, StoryObj } from "@storybook/react";
import { useState } from "react";

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

import { TabPaymentOption } from "./tab-payment-option";

const meta = {
  title: "Widgets/Payment/TabPaymentOption",
  component: TabPaymentOption,
  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 TabPaymentOption>;

export default meta;

type Story = StoryObj<typeof TabPaymentOption>;

export const DefaultTabPaymentOption: Story = {
  render: () => {
    const [activeTab, setActiveTab] = useState<"1" | "2">("1");
    return (
      <div className="flex w-[750px] gap-4">
        <TabPaymentOption
          firstTabTitle="Şimdi Kaydolun"
          secondTabTitle="Zaten kayıtlı mısınız?"
          firstTab={<p>firstTab</p>}
          secondTab={<p>secondTab</p>}
          defaultValue={activeTab}
          setActiveTab={(value: string) => setActiveTab(value as "1" | "2")}
        />
      </div>
    );
  },
};