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

export const Bell: React.FC<IconProps> = ({ colorVariant = 'body', ...props }) => {
  const { getIconColor } = useIcon();
  return (
    <Svg width="14" height="15" viewBox="0 0 14 15" fill="none" {...props}>
      <Path
        d="M7.01025 14.8889C5.63159 14.8889 4.51025 13.7676 4.51025 12.3889C4.51025 12.1129 4.73425 11.8889 5.01025 11.8889C5.28625 11.8889 5.51025 12.1129 5.51025 12.3889C5.51025 13.2163 6.18298 13.8889 7.01025 13.8889C7.83765 13.8889 8.51025 13.2163 8.51025 12.3889C8.51025 12.1129 8.73425 11.8889 9.01025 11.8889C9.28625 11.8889 9.51025 12.1129 9.51025 12.3889C9.51025 13.7676 8.38892 14.8889 7.01025 14.8889V14.8889Z"
        fill={getIconColor(colorVariant)}
      />
      <Path
        d="M12.5104 12.8889H1.51038C0.867065 12.8889 0.34375 12.3656 0.34375 11.7223C0.34375 11.3809 0.492432 11.0576 0.751709 10.8356C1.76575 9.97888 2.34375 8.73364 2.34375 7.41431V5.55554C2.34375 2.9823 4.43713 0.888916 7.01038 0.888916C9.58374 0.888916 11.6771 2.9823 11.6771 5.55554V7.41431C11.6771 8.73364 12.2551 9.97888 13.2625 10.8309C13.5284 11.0576 13.6771 11.3809 13.6771 11.7223C13.6771 12.3656 13.1538 12.8889 12.5104 12.8889ZM7.01038 1.88892C4.9884 1.88892 3.34375 3.53357 3.34375 5.55554V7.41431C3.34375 9.0282 2.63647 10.5522 1.40381 11.5942C1.38037 11.6143 1.34375 11.6556 1.34375 11.7223C1.34375 11.8129 1.4198 11.8889 1.51038 11.8889H12.5104C12.6011 11.8889 12.6771 11.8129 12.6771 11.7223C12.6771 11.6556 12.6404 11.6143 12.6184 11.5956C11.3844 10.5522 10.6771 9.0282 10.6771 7.41431V5.55554C10.6771 3.53357 9.03247 1.88892 7.01038 1.88892Z"
        fill={getIconColor(colorVariant)}
      />
    </Svg>
  );
};
