import { Meta, ComponentStory } from '@storybook/react';
import { EmptyStateCarousel } from './EmptyStateCarousel';
import { useTheme } from '@mui/styles';
import { fallBackImg, items } from './utils/_mock_';
import noop from 'lodash/noop';

export default {
  component: EmptyStateCarousel,
  title: 'Marketing/Empty State Carousel'
} as Meta;

const Template: ComponentStory<typeof EmptyStateCarousel> = args => {
  const theme = useTheme();

  return <EmptyStateCarousel {...args} />;
};

export const BigView = Template.bind({});
BigView.args = {
  items: items,
  isSmall: false,
  imgClickEvent: noop,
  leftClickEvent: noop,
  rightClickEvent: noop,
  isError: false
};

export const SmallView = Template.bind({});
SmallView.args = {
  items: items,
  isSmall: true,
  imgClickEvent: noop,
  leftClickEvent: noop,
  rightClickEvent: noop,
  isError: false
};

export const ErrorView = Template.bind({});
ErrorView.args = {
  isSmall: true,
  fallBackImg: fallBackImg,
  imgClickEvent: noop,
  leftClickEvent: noop,
  rightClickEvent: noop,
  isError: true
};