import { createElement, render } from 'rax';
import DriverUniversal from 'driver-universal';
import View from 'rax-view';
import Text from 'rax-text';
import { Avatar, Icon } from '@alifd/meet';

import '../../components/index.css';

const URL = 'https://gw.alicdn.com/tfs/TB13_8dhsieb18jSZFvXXaI3FXa-500-500.png';

const AvatarDemo = () => {
  const icon = <Icon name="account" />;

  return (
    <View>
      <Text className="demo-title">basic</Text>
      <View className="demo-content">
        <View className="demo-item-line">
          <View className="demo-item-name">small</View>
          <View className="demo-item-content-flex">
            <Avatar size="small" src={URL} />
            <Avatar size="small" shape="square" src={URL} />
          </View>
        </View>
        <View className="demo-item-line">
          <View className="demo-item-name">medium</View>
          <View className="demo-item-content-flex">
            <Avatar size="medium" src={URL} />
            <Avatar size="medium" shape="square" src={URL} />
          </View>
        </View>
        <View className="demo-item-line">
          <View className="demo-item-name">large</View>
          <View className="demo-item-content-flex">
            <Avatar size="large" src={URL} />
            <Avatar size="large" shape="square" src={URL} />
          </View>
        </View>
      </View>

      <Text className="demo-title">Text</Text>
      <View className="demo-content">
        <View className="demo-item-line">
          <View className="demo-item-name">small</View>
          <View className="demo-item-content-flex">
            <Avatar size="small">牧晟</Avatar>
            <Avatar size="small" shape="square">
              MS
            </Avatar>
          </View>
        </View>
        <View className="demo-item-line">
          <View className="demo-item-name">medium</View>
          <View className="demo-item-content-flex">
            <Avatar size="medium">牧晟</Avatar>
            <Avatar size="medium" shape="square">
              MS
            </Avatar>
          </View>
        </View>
        <View className="demo-item-line">
          <View className="demo-item-name">large</View>
          <View className="demo-item-content-flex">
            <Avatar size="large">牧晟</Avatar>
            <Avatar size="large" shape="square">
              MS
            </Avatar>
          </View>
        </View>
      </View>

      <Text className="demo-title">icon</Text>
      <View className="demo-content">
        <View className="demo-item-line">
          <View className="demo-item-name">small</View>
          <View className="demo-item-content-flex">
            <Avatar size="small" icon={icon} />
            <Avatar size="small" icon={icon} shape="square" />
          </View>
        </View>
        <View className="demo-item-line">
          <View className="demo-item-name">medium</View>
          <View className="demo-item-content-flex">
            <Avatar size="medium" icon={icon} />
            <Avatar size="medium" icon={icon} shape="square" />
          </View>
        </View>
        <View className="demo-item-line">
          <View className="demo-item-name">large</View>
          <View className="demo-item-content-flex">
            <Avatar size="large" icon={icon} />
            <Avatar size="large" icon={icon} shape="square" />
          </View>
        </View>
      </View>
    </View>
  );
};

// render(<AvatarDemo />, null, { driver: DriverUniversal });
 export default AvatarDemo