import React, { ForwardedRef, useContext } from 'react';
import { OriginIconProps } from '../type';
import { Context } from '../context';

function IconDeviceMobileComponent(props: OriginIconProps, ref: ForwardedRef<SVGSVGElement>) {
    const { prefix: prefixFromContext } = useContext(Context);
    const { className = '', prefix: prefixFromProps, width = '1em', height = '1em', useCurrentColor = false, spin, ...rest } = props;

    const prefix = prefixFromProps || prefixFromContext || 'hkgai';
    const loadingKls = spin ? ` ${prefix}-icon-loading` : '';
    return <svg className={`${prefix}-icon ${prefix}-icon-DeviceMobile${loadingKls} ${className}`} width={width} height={height} viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg" {...rest} ref={ref}><path d="M60 17.5V62.5H20V17.5H60Z" fill={useCurrentColor ? 'currentColor' : '#1C1C1C'} fillOpacity=".1"/><path d="M55 5H25C23.0109 5 21.1032 5.79018 19.6967 7.1967C18.2902 8.60322 17.5 10.5109 17.5 12.5V67.5C17.5 69.4891 18.2902 71.3968 19.6967 72.8033C21.1032 74.2098 23.0109 75 25 75H55C56.9891 75 58.8968 74.2098 60.3033 72.8033C61.7098 71.3968 62.5 69.4891 62.5 67.5V12.5C62.5 10.5109 61.7098 8.60322 60.3033 7.1967C58.8968 5.79018 56.9891 5 55 5ZM22.5 20H57.5V60H22.5V20ZM25 10H55C55.663 10 56.2989 10.2634 56.7678 10.7322C57.2366 11.2011 57.5 11.837 57.5 12.5V15H22.5V12.5C22.5 11.837 22.7634 11.2011 23.2322 10.7322C23.7011 10.2634 24.337 10 25 10ZM55 70H25C24.337 70 23.7011 69.7366 23.2322 69.2678C22.7634 68.7989 22.5 68.163 22.5 67.5V65H57.5V67.5C57.5 68.163 57.2366 68.7989 56.7678 69.2678C56.2989 69.7366 55.663 70 55 70Z" fill={useCurrentColor ? 'currentColor' : '#191D28'}/></svg>;
}

const IconDeviceMobile = React.forwardRef(IconDeviceMobileComponent);
export default IconDeviceMobile;
