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

interface CloseIconProps extends SvgProps {
    color?: string;
    size?: number;
}

export const Close: FC<CloseIconProps> = ({
    color,
    size = 16,
    ...restProps
}) => {
    const { colors } = useTheme();
    const iconColor = color || colors.midnight250;

    return (
        <Svg
            width={size}
            height={size}
            viewBox="0 0 24 24"
            fill="none"
            testID="closeIconSvg"
            {...restProps}
        >
            <Path
                strokeWidth="10"
                fillRule="evenodd"
                clipRule="evenodd"
                d="M5.56066 3.43934C4.97487 2.85355 4.02513 2.85355 3.43934 3.43934C2.85355 4.02513 2.85355 4.97487 3.43934 5.56066L9.87868 12L3.43934 18.4393C2.85355 19.0251 2.85355 19.9749 3.43934 20.5607C4.02513 21.1464 4.97487 21.1464 5.56066 20.5607L12 14.1213L18.4393 20.5607C19.0251 21.1464 19.9749 21.1464 20.5607 20.5607C21.1464 19.9749 21.1464 19.0251 20.5607 18.4393L14.1213 12L20.5607 5.56066C21.1464 4.97487 21.1464 4.02513 20.5607 3.43934C19.9749 2.85355 19.0251 2.85355 18.4393 3.43934L12 9.87868L5.56066 3.43934Z"
                fill={iconColor}
            />
        </Svg>
    );
};

export default memo(Close);