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

const meta: Meta = {
  title: "Hooks/useMediaQuery",
  argTypes: {
    queries: {
      table: {
        category: "Input Parameters",
        type: {
          summary: "string[]",
        },
      },
      description: "Array of queries to test",
      control: false,
    },
    "boolean[]": {
      table: {
        category: "Return Value",
        type: {
          summary: "boolean[]",
        },
      },
      description:
        "Array of booleans with as many values as queries passed. An element will be true if the media query matched and false otherwise",
      control: false,
      type: "string",
    },
  },
};

export default meta;

type Story = StoryObj<typeof useMediaQuery>;

export const Default: Story = {
  args: [],
  render: () => {
    // eslint-disable-next-line react-hooks/rules-of-hooks
    const [isLargerThan1280] = useMediaQuery(["(max-width: 1280px)"]);
    return (
      <Text css={{ color: "$light-off-white" }}>
        {isLargerThan1280 ? "less than or equal to 1280px" : "larger than 1280px"}
      </Text>
    );
  },
};