// @flow
import React from 'react';
import { action } from '@storybook/addon-actions';
import docs from './placeholder-card.mdx';
import { Box } from '../../../primitives/box';
import { PlaceholderCard } from './placeholder-card.component';
import { TertiaryButton } from '../../actions/tertiary-button';
import { Text } from '../../typography/text';

export default {
  component: PlaceholderCard,
  title: 'Organisms/PlaceholderCard',
  parameters: {
    docs: {
      page: docs,
    },
  },
};

export const Default = () => (
  <PlaceholderCard>
    <Text fontSize="f1" colorName="greyscale-dark" bold>
      Hello!
    </Text>
    <Text fontSize="f1" colorName="greyscale-dark">
      I am a placeholder card
    </Text>

    <Box spacing="mt3">
      <TertiaryButton onClick={action('no-op')}>Click me</TertiaryButton>
    </Box>
  </PlaceholderCard>
);

export const MinimumHeight = () => (
  <PlaceholderCard
    stacked="column"
    justify="center"
    minHeight="300px"
    minHeightMd="500px"
    minHeightLg="700px"
    spacing="p3"
  >
    <Text fontSize="f1" colorName="greyscale-dark" bold>
      Hello!
    </Text>
    <Text fontSize="f1" colorName="greyscale-dark">
      I am a placeholder card with customizable height!
    </Text>
    <Text fontSize="f1" colorName="greyscale-dark">
      Change the screen size to see.
    </Text>
    <Box spacing="mt3">
      <TertiaryButton onClick={action('no-op')}>Click me</TertiaryButton>
    </Box>
  </PlaceholderCard>
);
