import { IconProp } from '@fortawesome/fontawesome-svg-core';
// import '../../../libs/fontawesome/css/fontawesome.min.css';
// import '../../../libs/fontawesome/css/solid.min.css';
// import '../../../libs/fontawesome/css/regular.min.css';
// import '../../../libs/fontawesome/css/brands.min.css';
import { Sizes } from '../../styles';
import styled from 'styled-components';
import * as React from 'react';

interface HoverIcon {
    color: string;
}

interface Props {
    name: IconProp;
    style?: React.CSSProperties;
    color: string;
    type: 'solid' | 'regular' | 'brands';
    size: Sizes;
    hoverStyles?: HoverIcon;
}

const types = {
    solid: 'fas',
    regular: 'far',
    brands: 'fab',
}

const sizes = {
    xxs: '2px',
    xs: '5px',
    sm: '8px',
    md: '12px',
    lg: '15px',
    xl: '20px',
    xxl: '30px',
}

const StyledIcon = styled.i<{size: Sizes, color: string, hoverStyles?: HoverIcon}>`
    color: ${props => props.color};
    font-size: ${ props => sizes[props.size]};
    &:hover{
        ${ props => props.hoverStyles?.color &&
            `color: ${props.hoverStyles.color};`
        }
    }
`;

const Icon = (props: Props) => {
    const icon = `${types[props.type]} fa-${props.name}`
    return (
        <StyledIcon
            className={icon}
            size={props.size}
            color={props.color}
            style={props.style}
            hoverStyles={props.hoverStyles}
        >
        </StyledIcon>
    )
}

Icon.defaultProps = {
    type: 'solid',
    size: 'md',
    color: '#fff',
}

export default Icon;