import React, { useState } from 'react';
import { Switch, Row, Card, Avatar, Icon } from '@btri-ui/base';

export default () => {
  const [loading, setLoading] = useState(false);
  const onChange = () => setLoading(v => !v);
  return (
    <div>
      <Row>
        <Switch checked={!loading} onChange={onChange} />
      </Row>

      <Row autoMode={true} style={{ paddingTop: '16px' }}>
        <Card style={{ width: '270px' }} hasSkeletion loading={loading}>
          <Card.Meta
            avatar={<Avatar type="aydin" size={32} />}
            title="姓名"
            description="其他描述信息"
          />
        </Card>
      </Row>
      <Row autoMode={true} style={{ paddingTop: '16px' }}>
        <Card
          style={{ width: '270px' }}
          actions={[
            <Icon iconName="Share" key="setting" />,
            <Icon iconName="Edit" key="settin" />,
            <Icon iconName="More" key="seting" />,
          ]}
          hasSkeletion
          loading={loading}
          skeletonProps={{ avatar: true }}
        >
          <Card.Meta
            avatar={<Avatar type="aydin" size={32} />}
            title="姓名"
            description="其他描述信息"
          />
        </Card>
      </Row>
    </div>
  );
};