import { useIcon } from 'hooks';
import React from 'react';
import Svg, { Path } from 'react-native-svg';
import { IconProps } from '../types';

export const Coding: React.FC<IconProps> = ({ colorVariant = 'body', ...props }) => {
  const { getIconColor } = useIcon();

  return (
    <Svg width="14" height="14" viewBox="0 0 14 14" fill="none" {...props}>
      <Path
        d="M8.75392 4.42581C8.54034 4.21223 8.19405 4.21223 7.9805 4.42581C7.76694 4.63939 7.76692 4.98567 7.9805 5.19923L9.78131 7.00001L7.9805 8.80078C7.76692 9.01437 7.76692 9.36065 7.9805 9.5742C8.194 9.78776 8.54034 9.78778 8.75392 9.57423L10.9414 7.38673C11.155 7.17315 11.155 6.82687 10.9414 6.61331L8.75392 4.42581Z"
        fill={getIconColor(colorVariant)}
      />
      <Path
        d="M4.21874 7L6.01954 5.19922C6.23312 4.98564 6.23312 4.63936 6.01954 4.4258C5.80596 4.21225 5.45968 4.21222 5.24612 4.4258L3.05862 6.6133C2.84504 6.82688 2.84504 7.17316 3.05862 7.38672L5.24612 9.57422C5.45965 9.78775 5.80599 9.78777 6.01957 9.57422C6.23315 9.36064 6.23315 9.01436 6.01957 8.8008L4.21874 7Z"
        fill={getIconColor(colorVariant)}
      />
      <Path
        d="M12.3594 0.984375H1.64062C0.735984 0.984375 0 1.72036 0 2.625V11.375C0 12.2796 0.735984 13.0156 1.64062 13.0156H12.3594C13.264 13.0156 14 12.2796 14 11.375V2.625C14 1.72036 13.264 0.984375 12.3594 0.984375ZM12.9062 11.375C12.9062 11.6765 12.6609 11.9219 12.3594 11.9219H1.64062C1.33908 11.9219 1.09375 11.6765 1.09375 11.375V2.625C1.09375 2.32345 1.33908 2.07812 1.64062 2.07812H12.3594C12.6609 2.07812 12.9062 2.32345 12.9062 2.625V11.375Z"
        fill={getIconColor(colorVariant)}
      />
    </Svg>
  );
};
