import { Text } from "../../../components/text";
import { useBreakpoints } from ".";
import type { StoryObj, Meta } from "@storybook/react";

const meta: Meta = {
  title: "Hooks/useBreakpoints",

  argTypes: {
    object: {
      table: {
        category: "Return Value",
        type: {
          summary: "{ s: boolean; m: boolean; l: boolean; xl: boolean; }",
        },
      },
      description:
        "Returns an object with breakpoint-boolean key-value pairs based on the current active breakpoint.",
      control: false,
      type: "string",
    },
  },
};

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

export const Default: Story = {
  render: () => {
    // eslint-disable-next-line react-hooks/rules-of-hooks
    const bps = useBreakpoints();

    return (
      <Text css={{ color: "$light-off-white" }}>
        Current breakpoint table is:
        <pre>{JSON.stringify(bps)}</pre> resize window and the output changes accordingly.
      </Text>
    );
  },
};