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

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

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

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