import React from 'react';
import Card from '.';
import { Stack } from '../Layout/index';

export default {
  title: 'Components|Card',
  component: Card,
};

export const index = () => (
  <Stack background="#f9f9fa" gap="xlarge">
    <Card p="small" appearance="default" intent="neutral">
      Content
    </Card>
    <Card p="small" appearance="default" intent="warning">
      Warning
    </Card>
    <Card p="small" appearance="default" intent="danger">
      Danger
    </Card>
    <Card p="small" appearance="default" intent="info">
      Danger
    </Card>
    <Card
      p="small"
      borderWidth="2px"
      borderRadius="0px"
      borderColor="Orange"
      appearance="secondary"
      intent="neutral"
      tokenColor="Blue"
      tokenFontColor="White"
      tokenText="Recommended"
    >
      Secondary
    </Card>
    <Card p="small" appearance="secondary" intent="warning">
      Secondary warning
    </Card>
    <Card p="small" appearance="secondary" intent="info">
      Secondary info
    </Card>
    <Card p="small" borderColor="Blue" borderWidth="5px" appearance="card" intent="danger">
      Secondary danger
    </Card>
    <Card
      p="small"
      appearance="secondary"
      intent="danger"
      backgroundColor="orange"
      borderColor="red"
    >
      Background color and border colour changed
    </Card>
  </Stack>
);