import React from 'react';
import CardOutStock from '../components/CardOutStock/CardOutStock';
import { css } from '@emotion/css'
import tw, { styled } from 'twin.macro';


const StyledDiv = styled.div(({ twProps }) => [
  twProps,
])

export default {
  title: 'page-ui/CardOutStock',
  component: CardOutStock,
};

const Template = (args) => (
  <StyledDiv
    className={css`
    position: relative;
    width:100%;
    height:300px;
  `}
  >
    <CardOutStock  {...args} />
  </StyledDiv>
);

export const CardOutStockDefault = Template.bind({});
CardOutStockDefault.args = {
  isShowOutStock: true,
  text: 'สินค้าหมด',
  isSizeProductOneSKU: 'productGird',
}