// @flow
import React, { useContext } from 'react';
import { ThemeContext } from 'styled-components';
import { getPaletteColor } from '../../../mixins/branding';
import type { InformationSmallProps } from './information-small.proptypes';

export const InformationSmall = ({
  colorName = 'greyscale-black',
}: InformationSmallProps) => {
  const theme = useContext(ThemeContext);
  return (
    <svg
      width="16"
      height="16"
      viewBox="0 0 16 16"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M8 0C3.6 0 0 3.6 0 8C0 12.4 3.6 16 8 16C12.4 16 16 12.4 16 8C16 3.6 12.4 0 8 0ZM8 14C4.7 14 2 11.3 2 8C2 4.7 4.7 2 8 2C11.3 2 14 4.7 14 8C14 11.3 11.3 14 8 14ZM9 8V11C9 11.6 8.6 12 8 12C7.4 12 7 11.6 7 11V8C7 7.4 7.4 7 8 7C8.6 7 9 7.4 9 8ZM9.1 5C9.1 5.6 8.6 6.10001 8 6.10001C7.4 6.10001 6.9 5.6 6.9 5C6.9 4.4 7.4 3.89999 8 3.89999C8.6 3.89999 9.1 4.4 9.1 5Z"
        fill={getPaletteColor(colorName)({ theme })}
      />
    </svg>
  );
};

InformationSmall.displayName = 'InformationSmall';
