import React from 'react';
import { Path, Svg } from 'react-native-svg';
import { useTheme } from '../../../branding';

interface EditProps {
    color?: string;
    size?: number;
}

export const Edit = ({ color, size = 16 }: EditProps) => {
    const { colors } = useTheme();
    const fill = color ?? colors.gray0;

    return (
        <Svg
            width={size}
            height={size}
            viewBox="0 0 16 16"
            fill="none"
            testID="editIcon"
        >
            <Path
                d="M1.94732 9.31622L1.11508 14.3096C1.05868 14.648 1.35206 14.9414 1.69048 14.885L6.6839 14.0528C6.88948 14.0185 7.07923 13.9209 7.2266 13.7735L12.2929 8.70722C12.6834 8.3167 12.6834 7.68353 12.2929 7.29301L8.70711 3.70722C8.31658 3.3167 7.68342 3.3167 7.29289 3.70722L2.2266 8.77351C2.07923 8.92089 1.98158 9.11063 1.94732 9.31622Z"
                fill={fill}
            />
            <Path
                d="M10.25 2.25011L13.75 5.75011C14.1642 6.16433 14.8358 6.16433 15.25 5.75011C15.6642 5.3359 15.6642 4.66433 15.25 4.25011L11.75 0.750113C11.3358 0.3359 10.6642 0.3359 10.25 0.750113C9.83579 1.16433 9.83579 1.8359 10.25 2.25011Z"
                fill={fill}
            />
        </Svg>
    );
};

export default Edit;