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

type StoryType = StoryObj<typeof useBreakpoint>;

const meta: Meta = {
  title: "Theming/CSS Breakpoints in React",
};

export const Default: StoryType = {
  render: function Render() {
    const { breakpoint } = useBreakpoint();
    return (
      <div>
        The current breakpoint: {breakpoint.size}, {breakpoint.value}
      </div>
    );
  },
};

export const UpAndDown: StoryType = {
  render: function Render() {
    const { down, up } = useBreakpoint();
    const isMobile = down("sm");
    const isDesktop = up("md");
    return (
      <>
        <div>isMobile is:{isMobile ? "true" : "false"}</div>
        <div>isDesktop is:{isDesktop ? "true" : "false"}</div>
      </>
    );
  },
};

export default meta;
