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

export const AudioWave: React.FC<IconProps> = ({ colorVariant = 'white', ...props }) => {
  const { getIconColor } = useIcon();
  const color = useMemo(() => getIconColor(colorVariant), [getIconColor, colorVariant]);

  return (
    <Svg width="14" height="14" viewBox="0 0 14 14" fill="none" {...props}>
      <Path
        d="M4.66667 10.5013C4.9875 10.5013 5.25 10.2388 5.25 9.91797V4.08464C5.25 3.7638 4.9875 3.5013 4.66667 3.5013C4.34583 3.5013 4.08333 3.7638 4.08333 4.08464V9.91797C4.08333 10.2388 4.34583 10.5013 4.66667 10.5013ZM7 12.8346C7.32083 12.8346 7.58333 12.5721 7.58333 12.2513V1.7513C7.58333 1.43047 7.32083 1.16797 7 1.16797C6.67917 1.16797 6.41667 1.43047 6.41667 1.7513V12.2513C6.41667 12.5721 6.67917 12.8346 7 12.8346ZM2.33333 8.16797C2.65417 8.16797 2.91667 7.90547 2.91667 7.58464V6.41797C2.91667 6.09714 2.65417 5.83464 2.33333 5.83464C2.0125 5.83464 1.75 6.09714 1.75 6.41797V7.58464C1.75 7.90547 2.0125 8.16797 2.33333 8.16797ZM9.33333 10.5013C9.65417 10.5013 9.91667 10.2388 9.91667 9.91797V4.08464C9.91667 3.7638 9.65417 3.5013 9.33333 3.5013C9.0125 3.5013 8.75 3.7638 8.75 4.08464V9.91797C8.75 10.2388 9.0125 10.5013 9.33333 10.5013ZM11.0833 6.41797V7.58464C11.0833 7.90547 11.3458 8.16797 11.6667 8.16797C11.9875 8.16797 12.25 7.90547 12.25 7.58464V6.41797C12.25 6.09714 11.9875 5.83464 11.6667 5.83464C11.3458 5.83464 11.0833 6.09714 11.0833 6.41797Z"
        fill={color}
      />
    </Svg>
  );
};
