import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';

type DeviceIconProps = {
    size: number;
    testAutomationId?: string;
    className?: string;
} & Partial<DeviceIconDefaultProps>;

type DeviceIconDefaultProps = {
    testAutomationId: string;
    className: string;
};

export class DeviceIcon extends React.PureComponent<DeviceIconProps> {
    static propTypes = {
        size: PropTypes.number.isRequired,
        testAutomationId: PropTypes.string,
        className: PropTypes.string
    };

    static defaultProps = {
        testAutomationId: 'deviceIcon',
        className: ''
    };

    render() {
        const {testAutomationId, size, className} = this.props;
        const rootClassName = 'rc-device-icon';
        const iconClassName = classnames(`${rootClassName}__icon`, className);

        const style = {
            fontSize: `${size}px`
        };

        return (
            <div style={style} className={rootClassName} data-test-automation-id={testAutomationId}>
                <div className={iconClassName} />
            </div>
        );
    }
}
