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

export const SyncBack: React.FC<IconProps> = ({ colorVariant = 'body', ...props }) => {
  const { getIconColor } = useIcon();
  return (
    <Svg width="12" height="15" viewBox="0 0 12 15" fill="none" {...props}>
      <Path
        d="M6.00008 2.48863V1.29529C6.00008 0.995294 5.64008 0.848627 5.43341 1.06196L3.56675 2.92196C3.43341 3.05529 3.43341 3.26196 3.56675 3.39529L5.42675 5.25529C5.64008 5.46196 6.00008 5.31529 6.00008 5.01529V3.82196C8.20675 3.82196 10.0001 5.61529 10.0001 7.82196C10.0001 8.34863 9.90008 8.86196 9.70675 9.32196C9.60675 9.56196 9.68008 9.83529 9.86008 10.0153C10.2001 10.3553 10.7734 10.2353 10.9534 9.78863C11.2001 9.18196 11.3334 8.51529 11.3334 7.82196C11.3334 4.87529 8.94675 2.48863 6.00008 2.48863ZM6.00008 11.822C3.79341 11.822 2.00008 10.0286 2.00008 7.82196C2.00008 7.29529 2.10008 6.78196 2.29341 6.32196C2.39341 6.08196 2.32008 5.80863 2.14008 5.62863C1.80008 5.28863 1.22675 5.40863 1.04675 5.85529C0.800081 6.46196 0.666748 7.12863 0.666748 7.82196C0.666748 10.7686 3.05341 13.1553 6.00008 13.1553V14.3486C6.00008 14.6486 6.36008 14.7953 6.56675 14.582L8.42675 12.722C8.56008 12.5886 8.56008 12.382 8.42675 12.2486L6.56675 10.3886C6.36008 10.182 6.00008 10.3286 6.00008 10.6286V11.822Z"
        fill={getIconColor(colorVariant)}
      />
    </Svg>
  );
};
