import React from 'react';
import { I18nManager } from 'react-native';

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

import { IconProps } from './utils/base';

export const Recorder = ({ fill, height, pathFill, size, stroke, width, ...props }: IconProps) => {
  const color = pathFill ?? fill ?? stroke ?? 'black';

  return (
    <Svg viewBox='0 0 20 20' fill='none' height={height ?? size} width={width ?? size} {...props}>
      <G
        clipPath='url(#clip0_recorder)'
        transform={I18nManager.isRTL ? 'matrix(-1 0 0 1 20 0)' : undefined}
      >
        <Path
          d='M15 5.625V14.375C15 14.7065 14.8683 15.0245 14.6339 15.2589C14.3995 15.4933 14.0815 15.625 13.75 15.625H2.5C2.16848 15.625 1.85054 15.4933 1.61612 15.2589C1.3817 15.0245 1.25 14.7065 1.25 14.375V5.625C1.25 5.29348 1.3817 4.97554 1.61612 4.74112C1.85054 4.5067 2.16848 4.375 2.5 4.375H13.75C14.0815 4.375 14.3995 4.5067 14.6339 4.74112C14.8683 4.97554 15 5.29348 15 5.625ZM19.5312 5.64453C19.4431 5.62295 19.3513 5.62029 19.2621 5.63672C19.1728 5.65315 19.088 5.68829 19.0133 5.73984L16.3891 7.48906C16.3463 7.51762 16.3112 7.55631 16.2869 7.6017C16.2626 7.64708 16.25 7.69776 16.25 7.74922V12.2508C16.25 12.3022 16.2626 12.3529 16.2869 12.3983C16.3112 12.4437 16.3463 12.4824 16.3891 12.5109L19.0281 14.2703C19.1269 14.3362 19.2424 14.3726 19.3611 14.3752C19.4798 14.3779 19.5968 14.3466 19.6984 14.2852C19.7924 14.2254 19.8695 14.1425 19.9223 14.0444C19.9751 13.9464 20.0019 13.8364 20 13.725V6.25C20.0001 6.11139 19.9541 5.97668 19.8692 5.86708C19.7843 5.75747 19.6655 5.67918 19.5312 5.64453Z'
          fill={color}
        />
      </G>
      <Defs>
        <ClipPath id='clip0_recorder'>
          <Rect x='1' y='4' width='19' height='12' fill='white' />
        </ClipPath>
      </Defs>
    </Svg>
  );
};