import React from 'react';
import { Svg, Path } from 'react-native-svg';

import colors from 'constants/styleGuide/colors';

export default function InfoSvg({
  color = colors.light.blueGray,
  height = 20,
  width = 20,
  style,
  variant = 'outline',
}) {
  let d;

  switch (variant) {
    case 'fill':
      d =
        'M4 1C2.34315 1 1 2.34315 1 4V16C1 17.6569 2.34315 19 4 19H16C17.6569 19 19 17.6569 19 16V4C19 2.34315 17.6569 1 16 1H4ZM10.5254 11.5953H9.16416V11.3973C9.16416 10.3454 9.57253 9.93705 10.2779 9.38018L10.6739 9.0708C11.0823 8.74905 11.305 8.45205 11.3174 7.93231C11.3174 7.3383 10.9214 6.80618 10.0304 6.80618C9.10228 6.80618 8.65678 7.32593 8.65678 8.16743H7.22128C7.22128 6.73193 8.12466 5.5563 10.0304 5.5563C11.701 5.5563 12.7777 6.52155 12.7777 7.87043C12.7777 8.68718 12.4312 9.30593 11.8372 9.7638L11.3174 10.1722C10.7729 10.5929 10.5254 10.8157 10.5254 11.3973V11.5953ZM10.7605 13.5506C10.7605 14.0951 10.4388 14.4539 9.86953 14.4539C9.27553 14.4539 8.97853 14.0951 8.97853 13.5506C8.97853 13.0061 9.27553 12.6472 9.86953 12.6472C10.4388 12.6472 10.7605 13.0061 10.7605 13.5506Z';
      break;

    case 'outline':
      d =
        'M4 2.3H16C16.9389 2.3 17.7 3.06112 17.7 4V16C17.7 16.9389 16.9389 17.7 16 17.7H4C3.06112 17.7 2.3 16.9389 2.3 16V4C2.3 3.06112 3.06112 2.3 4 2.3ZM1 4C1 2.34315 2.34315 1 4 1H16C17.6569 1 19 2.34315 19 4V16C19 17.6569 17.6569 19 16 19H4C2.34315 19 1 17.6569 1 16V4ZM10.5254 11.5953H9.16416V11.3973C9.16416 10.3454 9.57253 9.93705 10.2779 9.38018L10.6739 9.0708C11.0823 8.74905 11.305 8.45205 11.3174 7.93231C11.3174 7.3383 10.9214 6.80618 10.0304 6.80618C9.10228 6.80618 8.65678 7.32593 8.65678 8.16743H7.22128C7.22128 6.73193 8.12466 5.5563 10.0304 5.5563C11.701 5.5563 12.7777 6.52155 12.7777 7.87043C12.7777 8.68718 12.4312 9.30593 11.8372 9.7638L11.3174 10.1722C10.7729 10.5929 10.5254 10.8157 10.5254 11.3973V11.5953ZM10.7605 13.5506C10.7605 14.0951 10.4388 14.4539 9.86953 14.4539C9.27553 14.4539 8.97853 14.0951 8.97853 13.5506C8.97853 13.0061 9.27553 12.6472 9.86953 12.6472C10.4388 12.6472 10.7605 13.0061 10.7605 13.5506Z';
      break;

    default:
      break;
  }

  return (
    <Svg width={width} height={height} viewBox="0 0 20 20" fill="none" style={style}>
      <Path fillRule="evenodd" clipRule="evenodd" d={d} fill={color} />
    </Svg>
  );
}
