import { IconProp } from '@fortawesome/fontawesome-svg-core';
import { Colors, Sizes, Variants } from '../../styles';
import Icon from '../../surface/icon';
import { StyledIconButton } from './styled-icon-button';
import * as React from 'react';

interface Props {
    id?: string;
    ref?: any;
    icon: IconProp;
    text?: string;
    size: Sizes;
    onClick?: () => void;
    variant: Variants;
    color: Colors;
    style?: React.CSSProperties;
}

const IconButton = (props: Props) => (
    <StyledIconButton
        ref={props.ref}
        id={props.id}
        size={props.size}
        color={props.color}
        variant={props.variant}
        onClick={props.onClick}
        style={props.style}
    >
        <Icon name={props.icon}/>
        <span> {props.text} </span>
    </StyledIconButton>
);

IconButton.defaultProps = {
    size: 'md',
    variant: 'transparent',
    color: 'primary',
};

export default IconButton;