import { createElement, render } from 'rax';
import { Button } from '@alifd/meet';
import View from 'rax-view';
import Text from 'rax-text';
import './index.css';

const types = ['normal', 'primary', 'warning', 'inverse'];
const models = ['solid', 'outline', 'text'];
const sizes = ['small', 'medium', 'large'];

const ButtonDemo = () => {
  return (
    <View>
      {types.map((type) => {
        return (
          <View key={type}>
            <Text className="demo-title">{type}</Text>
            {models.map((model) => {
              return (
                <View key={type + model} className={`demo-content demo-content--${type}`}>
                  <Text className="body-1">{model}</Text>
                  <View className={`button-row button-row-${type}`}>
                    {sizes.map((size) => {
                      return (
                        <Button key={`button-${type}-${model}-${size}`} size={size} model={model} type={type} loading>
                          {size}
                        </Button>
                      );
                    })}
                  </View>
                </View>
              );
            })}
          </View>
        );
      })}
    </View>
  );
};

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