import { ComponentStory, ComponentMeta } from '@storybook/react';
import { Container } from 'components/layout';
import { BottomSheet } from './index';

export default {
  title: 'Design System/BottomSheet',
  component: BottomSheet,
  argTypes: {
    height: {
      control: { type: 'number' },
    },
    isSheetOpen: {
      control: { type: 'boolean' },
    },
  },
} as ComponentMeta<typeof BottomSheet>;

export const Interactive: ComponentStory<typeof BottomSheet> = (args) => {
  return (
    <Container height={150}>
      <BottomSheet {...args} />
    </Container>
  );
};

Interactive.args = {
  isSheetOpen: true,
  height: 100,
};