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

import './index.css';

const BadgeDemo = () => {
  return (
    <View>
      <Text className="demo-title">Badge</Text>
      <View className="demo-content">
        <View className="demo-items">
          <View className="demo-item">
            <View className="demo-item-content">
              <Badge dot>
                <View className="demo-avatar" />
              </Badge>
            </View>
            <View className="demo-item-name">dot</View>
          </View>
          <View className="demo-item">
            <View className="demo-item-content">
              <Badge count="100">
                <View className="demo-avatar" />
              </Badge>
            </View>
            <View className="demo-item-name">count</View>
          </View>
          <View className="demo-item">
            <View className="demo-item-content">
              <Badge count="NEW">
                <View className="demo-avatar" />
              </Badge>
            </View>
            <View className="demo-item-name">new</View>
          </View>
          <View className="demo-item">
            <View className="demo-item-content">
              <Badge content={<Text style={{ color: 'red', fontSize: '0.40rem', lineHeight: 1 }}>©</Text>}>
                <View className="demo-avatar" />
              </Badge>
            </View>
            <View className="demo-item-name">custom</View>
          </View>
        </View>
      </View>
      <Text className="demo-title">List badge</Text>
      <View className="demo-content">
        <List>
          <List.Item>
            <List.ItemTitle>Label</List.ItemTitle>
            <Badge count="NEW" />
          </List.Item>
          <List.Item>
            <List.ItemTitle>Label</List.ItemTitle>
            <Badge count="NEW" />
          </List.Item>
          <List.Item>
            <List.ItemTitle>Label</List.ItemTitle>
            <Badge count="NEW" />
          </List.Item>
        </List>
      </View>
      <Text className="demo-title">Unread badge</Text>
      <View className="demo-content">
        <List>
          <List.Item>
            <List.ItemMedia>
              <Badge dot />
            </List.ItemMedia>
            <List.ItemTitle>Label</List.ItemTitle>
          </List.Item>
          <List.Item>
            <List.ItemMedia>
              <Badge dot />
            </List.ItemMedia>
            <List.ItemTitle>Label</List.ItemTitle>
          </List.Item>
          <List.Item>
            <List.ItemMedia>
              <Badge dot />
            </List.ItemMedia>
            <List.ItemTitle>Label</List.ItemTitle>
          </List.Item>
        </List>
      </View>
    </View>
  );
};

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