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

interface MyCatalogIconProps {
    active?: boolean;
}

const MyCatalogIcon = ({ active }: MyCatalogIconProps) => {
    const { colors } = useTheme();
    const fill = tabBarIconColor(colors, active);
    return (
        <View>
            <Svg height="24" width="24" viewBox="0 0 24 24">
                <G transform="translate(1.88, 3)">
                    <Path
                        testID={active ? 'pathActive' : 'pathInactive'}
                        d="M1.12147 1.5C1.12147 0.671573 1.79304 0 2.62147 0H9.62147C10.4499 0 11.1215 0.671573 11.1215 1.5V2H17.6215C18.4499 2 19.1215 2.67157 19.1215 3.5V5H1.12147V1.5Z"
                        fill={fill}
                    />
                    <Path
                        d="M1.50063 7C0.538051 7 -0.175395 7.89379 0.0379328 8.83243L1.85611 16.8324C2.01133 17.5154 2.61847 18 3.31881 18H16.9241C17.6245 18 18.2316 17.5154 18.3868 16.8324L20.205 8.83243C20.4183 7.89379 19.7049 7 18.7423 7H1.50063Z"
                        fill={fill}
                    />
                </G>
            </Svg>
        </View>
    );
};

export default MyCatalogIcon;