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

export const VideoCameraOutline: React.FC<IconProps> = ({ colorVariant = 'white', ...props }) => {
  const { getIconColor } = useIcon();
  return (
    <Svg width="16" height="16" viewBox="0 0 16 16" fill="none" {...props}>
      <Path
        d="M15.7397 4.36747C15.5763 4.25006 15.3664 4.21841 15.1757 4.28263L11.9606 5.36428V3.25C11.9606 2.38844 11.2684 1.6875 10.4175 1.6875H1.54306C0.692219 1.6875 0 2.38844 0 3.25V12.75C0 13.6116 0.692219 14.3125 1.54306 14.3125H10.4175C11.2684 14.3125 11.9606 13.6116 11.9606 12.75V10.6357L15.1757 11.7174C15.3664 11.7815 15.5763 11.7499 15.7397 11.6325C15.9031 11.5151 16 11.3262 16 11.125V4.875C16 4.67381 15.9031 4.48491 15.7397 4.36747ZM14.75 10.2553L11.9606 9.31688L11.5348 9.17366C11.13 9.03744 10.7106 9.33931 10.7106 9.76603V12.75C10.7106 12.9223 10.5791 13.0625 10.4175 13.0625H1.54306C1.38147 13.0625 1.25 12.9223 1.25 12.75V3.25C1.25 3.07769 1.38147 2.9375 1.54306 2.9375H10.4175C10.5791 2.9375 10.7106 3.07769 10.7106 3.25V6.23397C10.7106 6.66106 11.1303 6.96237 11.5348 6.82634L11.9606 6.68312L14.75 5.74469V10.2553Z"
        fill={getIconColor(colorVariant)}
      />
      <Path
        d="M11.5348 9.17366L11.9606 9.31688V6.68312L11.5348 6.82634C11.1303 6.96237 10.7106 6.66106 10.7106 6.23397V9.76603C10.7106 9.33931 11.13 9.03744 11.5348 9.17366Z"
        fill={getIconColor(colorVariant)}
      />
    </Svg>
  );
};
