import { FC, SVGAttributes } from 'react';
import styles from './computer-screen.module.scss';

export type ComputerScreenProps = SVGAttributes<SVGElement>;

/**
 * ComputerScreen component
 *
 * Render a computer screen svg icon.
 */
export const ComputerScreen: FC<ComputerScreenProps> = ({
  className = '',
  ...props
}) => {
  return (
    <svg
      {...props}
      className={`${styles.icon} ${className}`}
      viewBox="0 0 100 100"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M 1.0206528,11.991149 H 98.979347 V 78.466748 H 1.0206528 Z"
        className={styles.contour}
      />
      <path
        d="M 6.2503581,18.032451 H 93.563283 V 71.12731 H 6.2503581 Z"
        className={styles.screen}
      />
      <path
        d="m 40.038268,78.939276 c 4.614714,2.7794 4.333151,10.099225 0,17.60572 H 50 59.961731 c -4.333151,-7.506495 -4.614715,-14.82632 0,-17.60572 H 50 Z"
        className={`${styles.stand} ${styles['stand--top']}`}
      />
      <path
        d="m 31.084262,96.254656 h 37.831475 c 1.394769,0 2.517635,0.404907 2.517635,0.907864 v 1.179616 c 0,0.502956 -1.122866,0.907864 -2.517635,0.907864 H 31.084262 c -1.394769,0 -2.517635,-0.404908 -2.517635,-0.907864 V 97.16252 c 0,-0.502957 1.122866,-0.907864 2.517635,-0.907864 z"
        className={`${styles.stand} ${styles['stand--bottom']}`}
      />
      <path
        d="m 13.259277,26.737199 h 29.132596 v 2.567314 H 13.259277 Z"
        className={styles.line}
      />
      <path
        d="M 13.259277,36.439141 H 36.46805 v 2.567315 H 13.259277 Z"
        className={styles.line}
      />
      <path
        d="m 13.259277,46.141084 h 26.586812 v 2.567314 H 13.259277 Z"
        className={styles.line}
      />
      <path
        d="m 18.443194,65.930804 h 4.417548 v 1 h -4.417548 z"
        className={styles.cursor}
      />
      <path
        d="m 77.586096,42.217577 v -1.680914 l 6.160884,-2.39919 -6.160884,-2.406595 v -1.68832 l 7.604842,2.89532 v 2.38438 z"
        className={styles.text}
      />
      <path
        d="m 68.396606,43.291289 6.07943,-11.136982 h 1.688318 l -6.049809,11.136982 z"
        className={styles.text}
      />
      <path
        d="m 59.384832,39.322258 v -2.38438 l 7.604841,-2.89532 v 1.68832 l -6.168289,2.406595 6.168289,2.399191 v 1.680915 z"
        className={styles.text}
      />
      <path
        d="M 7.1079167,57.876372 H 92.892083 v 0.813634 H 7.1079167 Z"
        className={styles.separator}
      />
      <path
        d="m 17.042456,64.960616 q 0,0.632276 -0.426175,0.9816 -0.422681,0.345831 -1.254074,0.37727 v 0.611318 h -0.380763 v -0.600838 q -0.751047,-0.02795 -1.170236,-0.352818 -0.419189,-0.328364 -0.551931,-1.002559 l 0.89427,-0.164183 q 0.06637,0.394736 0.261992,0.579878 0.199115,0.181648 0.565905,0.216581 v -1.365857 q -0.01048,-0.007 -0.0524,-0.01398 -0.04192,-0.01048 -0.05589,-0.01048 -0.562412,-0.129244 -0.848857,-0.303907 -0.286445,-0.178155 -0.443642,-0.447135 -0.153701,-0.272472 -0.153701,-0.663715 0,-0.579878 0.394736,-0.894269 0.394736,-0.317886 1.159755,-0.349325 v -0.468093 h 0.380763 v 0.468095 q 0.681183,0.02445 1.047973,0.303911 0.36679,0.275967 0.527479,0.918723 l -0.92222,0.136236 q -0.104797,-0.600837 -0.653236,-0.674195 v 1.22962 l 0.03843,0.007 q 0.101305,0 0.614811,0.167676 0.517,0.167676 0.772007,0.496041 0.255006,0.324871 0.255006,0.817418 z m -2.061012,-2.731715 q -0.639264,0.04891 -0.639264,0.558918 0,0.157196 0.0524,0.2585 0.0524,0.09781 0.157197,0.167676 0.104797,0.06986 0.429668,0.174662 z m 1.152769,2.745688 q 0,-0.174662 -0.06288,-0.282954 -0.06288,-0.111783 -0.185141,-0.181648 -0.118771,-0.06986 -0.523987,-0.185142 v 1.28202 q 0.772006,-0.0524 0.772006,-0.632276 z"
        className={styles.root}
      />
    </svg>
  );
};