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

/** Reusable GradientBlur Component */
const meta: Meta<typeof GradientBlur> = {
  title: "Widgets/GradientBlur",
  component: GradientBlur,
  tags: ["autodocs"],
  args: {
    children: (
      <div className="w-[200px] mt-[30px] text-center p-8 bg-secondary h-[100px]">
        Children
      </div>
    ),
  },
  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>
      <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>
      <div className="fixed bottom-0 left-0 right-0">
        <GradientBlur
          {...args}
          className="py-5"
        />
      </div>
    </div>
  ),
};

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

export const Default = {} satisfies Story;
