/* eslint-disable react-hooks/rules-of-hooks */
import { Text } from "../../../components/text";
import { useCurrentBreakpoint } from ".";

import type { StoryObj, Meta } from "@storybook/react";

const meta: Meta = {
  title: "Hooks/useCurrentBreakpoint",
  argTypes: {
    string: {
      table: {
        category: "Return Value",
        type: {
          summary: "string",
        },
      },
      description:
        "Breakpoint name as defined in the `media` key of the configuration object of `createStitches` based on the " +
        "`true` value from `useBreakpoints`. If all values are false `@initial` will be returned.",
      control: false,
      type: "string",
    },
  },
};

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

/**
 * In this example `bpContent` will be `small` and `medium` respectively depending on the current active breakpoint but because the `App` did not define a value for when the largest breakpoint is active, `bpContent` will, at that point, be assigned `defaultContent`.
 */
export const Default: Story = {
  render: () => {
    const bp = useCurrentBreakpoint();

    return (
      <Text variant="body4" css={{ color: "$light-off-white" }}>
        Current breakpoint is: {bp}
      </Text>
    );
  },
};