import React from 'react';
import Svg, { ClipPath, Defs, G, Path, Rect } from 'react-native-svg';

const ChargeItemSelect = ({size=16, selected=false, tint=colorAccent}) => (
  <Svg width={size} height={size} viewBox="0 0 16 16">
    <G clip-path="url(#clip0_30_5787)">
      <Path
        fill={selected ? tint : "#CCCCCC"}
        d="M8 0C9.58225 0 11.129 0.469192 12.4446 1.34824C13.7602 2.22729 14.7855 3.47672 15.391 4.93853C15.9965 6.40034 16.155 8.00887 15.8463 9.56072C15.5376 11.1126 14.7757 12.538 13.6569 13.6569C12.538 14.7757 11.1126 15.5376 9.56072 15.8463C8.00887 16.155 6.40034 15.9965 4.93853 15.391C3.47672 14.7855 2.22729 13.7602 1.34824 12.4446C0.469192 11.129 0 9.58225 0 8C0 5.87827 0.842855 3.84344 2.34315 2.34315C3.84344 0.842855 5.87827 0 8 0V0Z"/>
      <Path
        fill={selected ? "#FFF" : "#F0F0F0"}
        d="M6.85716 11.6801C6.65663 11.68 6.45836 11.6378 6.27524 11.5561C6.09212 11.4744 5.92825 11.355 5.7943 11.2058L3.42859 8.5715C3.29142 8.40054 3.22495 8.18353 3.24286 7.96507C3.26076 7.74662 3.36167 7.54332 3.52484 7.39698C3.68802 7.25064 3.90106 7.17236 4.12016 7.17825C4.33927 7.18414 4.5478 7.27374 4.70287 7.42864L6.85716 9.82864L11.2972 4.94864C11.4541 4.80299 11.6598 4.72134 11.8739 4.71975C12.088 4.71816 12.2949 4.79675 12.454 4.94005C12.6131 5.08335 12.7127 5.28098 12.7334 5.49408C12.7541 5.70717 12.6943 5.92029 12.5657 6.0915L7.9143 11.2001C7.78128 11.3493 7.61852 11.4692 7.43647 11.5518C7.25442 11.6345 7.05709 11.6782 6.85716 11.6801Z"/>
    </G>
    <Defs>
      <ClipPath id="clip0_30_5787">
        <Rect width={size} height={size} fill="white"/>
      </ClipPath>
    </Defs>
  </Svg>
);

export default ChargeItemSelect;