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

const HeartOutlineIcon = ({ 
  color = "#373737", 
  size = 18,
  strokeWidth = 1.5,
  filled = false
}) => (
  <Svg width={size} height={size} viewBox="0 0 18 18" fill="none">
    <Path
      d="M8.4056 3.43038L8.99679 4.1987L9.592 3.43348C10.4135 2.37733 11.6371 1.75 12.9407 1.75C15.2862 1.75 17.25 3.75735 17.25 6.2908C17.25 7.77904 16.567 8.83656 15.9096 9.81912C15.0152 11.153 13.4118 12.6976 11.9596 13.9559C10.5206 15.2026 9.29442 16.1136 9.20934 16.1746L9.20188 16.18L9.19456 16.1855C9.13636 16.2295 9.07113 16.25 9 16.25C8.92887 16.25 8.86364 16.2295 8.80544 16.1855L8.79812 16.18L8.79066 16.1746C8.70433 16.1127 7.47555 15.204 6.03606 13.9591C4.58264 12.7022 2.98062 11.1585 2.09213 9.82166L2.09084 9.81974C1.4333 8.83701 0.75 7.77936 0.75 6.2908C0.75 3.75735 2.71378 1.75 5.05929 1.75C6.36516 1.75 7.59665 2.37906 8.4056 3.43038Z"
      stroke={color}
      strokeWidth={strokeWidth}
      fill={filled ? color : "transparent"}
    />
  </Svg>
);

export default HeartOutlineIcon;