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

import colors from '../../constants/styleGuide/colors';

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

  switch (variant) {
    case 'fill':
      d =
        'M18.6732 9.10784C19.1089 9.62782 19.1089 10.3722 18.6732 10.8922C17.2726 12.5637 13.9169 16 10 16C6.08308 16 2.72741 12.5637 1.32678 10.8922C0.891074 10.3722 0.891075 9.62782 1.32678 9.10784C2.72741 7.43628 6.08308 4 10 4C13.9169 4 17.2726 7.43628 18.6732 9.10784ZM11.2 10C11.2 10.6627 10.6627 11.2 10 11.2C9.33726 11.2 8.8 10.6627 8.8 10C8.8 9.33726 9.33726 8.8 10 8.8C10.6627 8.8 11.2 9.33726 11.2 10ZM12.5 10C12.5 11.3807 11.3807 12.5 10 12.5C8.61929 12.5 7.5 11.3807 7.5 10C7.5 8.61929 8.61929 7.5 10 7.5C11.3807 7.5 12.5 8.61929 12.5 10Z';
      break;

    case 'outline':
      d =
        'M17.4739 9.80856C17.569 9.91881 17.569 10.0812 17.4739 10.1915C16.8032 10.9689 15.7697 12.0378 14.5089 12.9334C13.1245 13.9167 11.5761 14.6133 10 14.6133C8.42394 14.6133 6.87546 13.9167 5.49112 12.9334C4.23032 12.0378 3.19684 10.9689 2.52609 10.1914C2.43098 10.0812 2.43098 9.91881 2.52609 9.80855C3.19684 9.03106 4.23032 7.96216 5.49113 7.06661C6.87546 6.08332 8.42395 5.38667 10 5.38667C11.5761 5.38667 13.1245 6.08332 14.5089 7.06661C15.7697 7.96216 16.8032 9.03106 17.4739 9.80856ZM18.6732 9.10784C19.1089 9.62782 19.1089 10.3722 18.6732 10.8922C17.2726 12.5637 13.9169 16 10 16C6.08308 16 2.72741 12.5637 1.32678 10.8922C0.891074 10.3722 0.891075 9.62782 1.32678 9.10784C2.72741 7.43628 6.08308 4 10 4C13.9169 4 17.2726 7.43628 18.6732 9.10784ZM11.2 10C11.2 10.6627 10.6627 11.2 10 11.2C9.33726 11.2 8.8 10.6627 8.8 10C8.8 9.33726 9.33726 8.8 10 8.8C10.6627 8.8 11.2 9.33726 11.2 10ZM12.5 10C12.5 11.3807 11.3807 12.5 10 12.5C8.61929 12.5 7.5 11.3807 7.5 10C7.5 8.61929 8.61929 7.5 10 7.5C11.3807 7.5 12.5 8.61929 12.5 10Z';
      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>
  );
}
