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

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

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

    return (
        <Svg
            width={size}
            height={size}
            viewBox="0 0 16 16"
            fill="none"
            testID="externalLinkIcon"
        >
            <Path
                d="M10.5858 4L5.29289 9.29289C4.90237 9.68342 4.90237 10.3166 5.29289 10.7071C5.68342 11.0976 6.31658 11.0976 6.70711 10.7071L12 5.41421V8C12 8.55228 12.4477 9 13 9C13.5523 9 14 8.55228 14 8V3.00069C14 2.99969 14 2.998 14 2.997C13.9992 2.74208 13.9016 2.48739 13.7071 2.29289C13.6112 2.19702 13.5007 2.12468 13.3828 2.07588C13.2649 2.02699 13.1356 2 13 2H8C7.44772 2 7 2.44772 7 3C7 3.55228 7.44772 4 8 4H10.5858Z"
                fill={fill}
            />
            <Path
                d="M2 4C2.55228 4 3 4.44772 3 5V13H11C11.5523 13 12 13.4477 12 14C12 14.5523 11.5523 15 11 15H2C1.44772 15 1 14.5523 1 14V5C1 4.44772 1.44772 4 2 4Z"
                fill={fill}
            />
        </Svg>
    );
};

export default ExternalLink;