import { useState } from 'react';
import { Button, UseMediaQueries } from '../index';

const meta = {
  title: 'Utils / Media Queries',
  component: UseMediaQueries,
  parameters: {
    controls: { expanded: true },
  },
};

export default meta;

const Template = (args) => {
  const [mq, mqSetter] = useState(null);

  return (
    <div>
      <Button
        title="Resize & click to get device size"
        callback={() => mqSetter(UseMediaQueries)}
      />

      <br />
      <strong>Mq: </strong>
      {mq}
    </div>
  );
};

export const Default = Template.bind({});
Default.args = {};