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

const InfoIcon = ({size = 20,color = "#3D3D3D"}:{size:number,color:string   }) => (
  <Svg
    viewBox="0 0 1024 1024"
    width={size}
    height={size}
  >
    {/* Outer circle */}
    <Path
      d="M512.50142 958.397886c-119.320573 0-231.499491-46.465265-315.871087-130.837884C112.258737 743.188406 65.792449 631.010511 65.792449 511.688915c0-119.319549 46.466288-231.499491 130.837884-315.871087C281.002952 111.445208 393.180847 64.979944 512.50142 64.979944s231.499491 46.465265 315.871087 130.837884c84.372619 84.372619 130.837884 196.551538 130.837884 315.871087 0 119.321596-46.465265 231.499491-130.837884 315.871087C744.000911 911.932622 631.821993 958.397886 512.50142 958.397886zM512.50142 105.962334c-223.718271 0-405.726581 182.00831-405.726581 405.726581s182.00831 405.726581 405.726581 405.726581c223.718271 0 405.727605-182.00831 405.727605-405.726581S736.220714 105.962334 512.50142 105.962334z"
      fill={color}
    />
    
    {/* Info line (i) */}
    <Path
      d="M510.150886 775.953647c-18.107403 0-32.745798-14.678304-32.745798-32.785707L477.405087 452.191846c0-18.108426 14.638395-32.785707 32.745798-32.785707 18.107403 0 32.745798 14.678304 32.745798 32.785707l0 290.976094C542.896684 761.275343 528.258289 775.953647 510.150886 775.953647z"
      fill={color}
    />
    
    {/* Info dot (i) */}
    <Circle
      cx="511.357364"
      cy="296.458969"
      r="44.054"
      fill={color}
    />
  </Svg>
);

export default InfoIcon;