import React from 'react';
import { Btn } from './style';
import styled from 'styled-components';
import Icon from 'kwai-icon';
import { IButton } from './types';

export const Button = function({ children, icon, rightIcon, iconSize = 'small', ...rest }: IButton) {
    if (typeof children === 'string') {
        children = <span>{children}</span>;
    }

    return (
        <Btn {...rest} hasChildren={Boolean(children)}>
            {icon && (
                <Icon
                    name={icon}
                    className={(rest.appearance === 'solid' ? 'btn-icon-white' : 'btn-icon-invert') + ' fix-v-align'}
                    size={iconSize}
                />
            )}
            {children}
            {rightIcon && (
                <Icon
                    className={(rest.appearance === 'solid' ? 'btn-icon-white' : 'btn-icon-invert') + ' fix-v-align'}
                    name={rightIcon}
                    size={iconSize}
                />
            )}
        </Btn>
    );
};
Button.defaultProps = {
    color: 'brand',
    size: 'large',
    appearance: 'solid',
    iconColor: 'white',
    iconFillColorRule: '&&& path',
    ripple: true,
    disabled: false,
};
export const Round = styled(Button).attrs(({ icon }) => ({ appearance: 'round', icon: icon || 'Add' }))<IButton>`
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.18);
    border-radius: 24px;
    height: 48px;
    min-width: 48px;
    padding: 0 12px;
    svg {
        margin: 0 !important;
        width: 24px;
        height: 24px;
    }
    span {
        display: inline-block;
        margin-left: 8px;
    }
    &&&&&&&& svg path {
        fill: rgb(255, 90, 94);
    }
`;
Button.Round = Round;
export default Button;