import { Meta } from '@storybook/react';
import React from 'react';
import Button from '../button';

import { Card, CardSubsection, CardSection } from '.';
import Space from '../space';

export default {
  title: '数据展示/卡片 Card',
  component: Card,
  subcomponents: { Section: CardSection, Subsection: CardSubsection },
} as Meta;

export const 基本使用 = () => (
  <Card
    sectioned
    extra={<Button type="link">Button</Button>}
    footer={
      <Space>
        <Button type="primary">保存</Button>
        <Button>取消</Button>
      </Space>
    }
    title="title"
  >
    内容
  </Card>
);

export const Section使用 = () => (
  <Card extra={<Button type="link">Button</Button>} title="title">
    <CardSection extra={<Button type="link">Button</Button>} title="Section 标题">
      Section 内容
    </CardSection>
    <CardSection extra={<Button type="link">Button</Button>} title="Section 标题">
      Section 内容
    </CardSection>
    <CardSection extra={<Button type="link">Button</Button>} title="Section 标题">
      Section 内容
    </CardSection>
  </Card>
);

export const Subsection使用 = () => (
  <Card title="title">
    <CardSection>
      <p>John Smith</p>
    </CardSection>
    <CardSection title="Addresses">
      <CardSubsection>
        111
        <br />
        222
        <br />
        333
      </CardSubsection>
      <CardSubsection>
        444
        <br />
        555
        <br />
        666
      </CardSubsection>
    </CardSection>
    <CardSection>
      <CardSubsection>内容</CardSubsection>
    </CardSection>
  </Card>
);