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

export const Learn: React.FC<SvgProps> = (props) => {
  const { theme } = useTheme();
  return (
    <Svg width="18" height="18" viewBox="0 0 18 18" fill="none" {...props}>
      <Path
        d="M9.84372 0C6.1211 0 3.09372 3.02737 3.09372 6.75V7.74225L1.46585 10.998C1.3781 11.1724 1.38822 11.3794 1.4906 11.5448C1.59297 11.7101 1.7741 11.8125 1.96872 11.8125H3.09372V14.5215C3.09372 14.8523 3.23772 15.1639 3.49085 15.3776C3.74397 15.5914 4.07247 15.6847 4.40097 15.6296L6.46872 15.2876V17.4375C6.46872 17.6029 6.54072 17.7604 6.66785 17.8661C6.77022 17.9527 6.89847 18 7.03122 18C7.0616 18 7.0931 17.9977 7.12347 17.9921L13.8735 16.8671C14.1446 16.8221 14.3437 16.5881 14.3437 16.3125V12.8464C14.3437 12.0634 14.7285 11.4356 15.0514 11.0452C16.0459 9.84375 16.5937 8.31825 16.5937 6.75C16.5937 3.02737 13.5663 0 9.84372 0ZM14.1851 10.3286C13.5528 11.0914 13.2187 11.9621 13.2187 12.8464V15.8355L7.59372 16.7738V14.625C7.59372 14.4596 7.52172 14.3033 7.3946 14.1964C7.29222 14.1098 7.16397 14.0625 7.03122 14.0625C7.00085 14.0625 6.97047 14.0647 6.93897 14.0704L4.21872 14.5215V11.25C4.21872 10.9395 3.96672 10.6875 3.65622 10.6875H2.87885L4.1591 8.127C4.19847 8.04825 4.21872 7.96275 4.21872 7.875V6.75C4.21872 3.64838 6.7421 1.125 9.84372 1.125C12.9453 1.125 15.4687 3.64838 15.4687 6.75C15.4687 8.05612 15.0131 9.32737 14.1851 10.3286Z"
        fill={theme.colors.body}
      />
    </Svg>
  );
};
