import React from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import { Row } from 'components/layout';
import { Event, EventVariants } from './index';

export default {
  title: 'App Components/Dashboard/Event',
  component: Event,
} as ComponentMeta<typeof Event>;

const Template: ComponentStory<typeof Event> = () => {
  return <Event width={300} />;
};

export const Interactive = Template.bind({});

export const Variants: ComponentStory<typeof Event> = () => {
  return (
    <>
      <Row>
        {[
          { index: 1, variant: 'compact' as EventVariants },
          { index: 2, variant: 'full' as EventVariants },
        ].map((item) => (
          <Event mx="s" eventVariant={item.variant} />
        ))}
      </Row>
    </>
  );
};