import { createElement, render } from 'rax';
import { Rating } from '@alifd/meet';
import View from 'rax-view';
import Text from 'rax-text';

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

const RatingDemo = () => {
  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">
            <Rating size="small" defaultValue={3} />
          </View>
        </View>
        <View className="demo-item-line">
          <View className="demo-item-name">medium</View>
          <View className="demo-item-content">
            <Rating size="medium" defaultValue={3} />
          </View>
        </View>
        <View className="demo-item-line">
          <View className="demo-item-name">large</View>
          <View className="demo-item-content">
            <Rating size="large" defaultValue={3} />
          </View>
        </View>
      </View>
      <Text className="demo-title">Low Grade</Text>
      <View className="demo-content">
        <View className="demo-item-line">
          <View className="demo-item-name">small</View>
          <View className="demo-item-content">
            <Rating size="small" defaultValue={1} />
          </View>
        </View>
        <View className="demo-item-line">
          <View className="demo-item-name">medium</View>
          <View className="demo-item-content">
            <Rating size="medium" defaultValue={1} />
          </View>
        </View>
        <View className="demo-item-line">
          <View className="demo-item-name">large</View>
          <View className="demo-item-content">
            <Rating size="large" defaultValue={1} />
          </View>
        </View>
      </View>
      <Text className="demo-title">Custom icon</Text>
      <View className="demo-content">
        <Rating size="large" iconType="favorite" defaultValue={3.3} />
      </View>
      <Text className="demo-title">Half score</Text>
      <View className="demo-content">
        <Rating size="large" defaultValue={3.3} />
      </View>
    </View>
  );
};

// render(<RatingDemo />, null, { driver: DU });
 export default RatingDemo