import { Meta, StoryObj } from "@storybook/nextjs-vite";
import { BottomActionButton } from "./BottomActionButton";
import Typography from "@/components/ui/Typography/Typography";

/** Reusable BottomActionButton Component */
const meta: Meta<typeof BottomActionButton> = {
  title: "Widgets/BottomActionButton",
  component: BottomActionButton,
  tags: ["autodocs"],
  args: {
    actionButtonProps: {
      children: "Continue",
    },
  },
  argTypes: {},
  render: (args) => (
    <div className="relative w-full h-full">
      <Typography as="p" size="lg">
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptates
        ipsam ea sit libero minus cum consequatur. Atque reprehenderit
        perspiciatis dolores accusamus hic, sapiente veniam ex dolorem ullam.
        Aspernatur, vitae debitis.
      </Typography>
      <br />
      <Typography as="p" size="lg">
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptates
        ipsam ea sit libero minus cum consequatur. Atque reprehenderit
        perspiciatis dolores accusamus hic, sapiente veniam ex dolorem ullam.
        Aspernatur, vitae debitis.
      </Typography>
      <br />
      <Typography as="p" size="lg">
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptates
        ipsam ea sit libero minus cum consequatur. Atque reprehenderit
        perspiciatis dolores accusamus hic, sapiente veniam ex dolorem ullam.
        Aspernatur, vitae debitis.
      </Typography>
      <br />
      <Typography as="p" size="lg">
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptates
        ipsam ea sit libero minus cum consequatur. Atque reprehenderit
        perspiciatis dolores accusamus hic, sapiente veniam ex dolorem ullam.
        Aspernatur, vitae debitis.
      </Typography>
      <BottomActionButton {...args} />
    </div>
  ),
};

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

export const Default = {} satisfies Story;

export const WithChildrenAbove: Story = {
  args: {
    actionButtonProps: {
      children: "Continue",
    },
    childrenAboveButton: (
      <div className="w-full text-center space-y-1 mb-4">
        <Typography
          as="p"
          size="sm"
          color="muted"
          className="font-medium text-center"
        >
          Выбранная дата:
        </Typography>
        <Typography
          as="p"
          size="xl"
          weight="bold"
          color="default"
          className="font-semibold text-center"
        >
          April 8, 1987
        </Typography>
      </div>
    ),
  },
};

export const WithChildrenUnder: Story = {
  args: {
    actionButtonProps: {
      children: "Continue",
    },
    childrenUnderButton: (
      <Typography
        as="p"
        size="sm"
        color="muted"
        className="text-center mt-3"
      >
        By continuing, you agree to our Terms of Service
      </Typography>
    ),
  },
};

export const WithBothChildren: Story = {
  args: {
    actionButtonProps: {
      children: "Continue",
    },
    childrenAboveButton: (
      <div className="w-full text-center space-y-1 mb-4">
        <Typography
          as="p"
          size="sm"
          color="muted"
          className="font-medium text-center"
        >
          Selected Date:
        </Typography>
        <Typography
          as="p"
          size="xl"
          weight="bold"
          color="default"
          className="font-semibold text-center"
        >
          March 15, 1990
        </Typography>
      </div>
    ),
    childrenUnderButton: (
      <Typography
        as="p"
        size="sm"
        color="muted"
        className="text-center mt-3"
      >
        Your information is secure and private
      </Typography>
    ),
  },
};

export const OnlyGradientBlur: Story = {
  args: {
    showGradientBlur: true,
    childrenAboveButton: (
      <div className="text-center space-y-1">
        <Typography
          as="p"
          size="lg"
          color="default"
          className="font-semibold"
        >
          Content above the button area
        </Typography>
        <Typography
          as="p"
          size="sm"
          color="muted"
        >
          This example shows content in the blur area without a button
        </Typography>
      </div>
    ),
  },
};
