import { createElement, render } from 'rax';
import DriverUniversal from 'driver-universal';
import { Button, Icon } 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 className="app">
      {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}>
                          <Icon name="add" />
                          btn
                        </Button>
                      );
                    })}
                  </View>
                  <View className={`button-row button-row-${type}`}>
                    {sizes.map((size) => {
                      return (
                        <Button key={`button-${type}-${model}-${size}-disabled`} size={size} model={model} type={type}>
                          btn
                          <Icon name="arrow-right" />
                        </Button>
                      );
                    })}
                  </View>
                </View>
              );
            })}
          </View>
        );
      })}
    </View>
  );
};

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