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 ChartsDigestIconProps {
    active?: boolean;
}

const ChartsDigestIcon = ({ active }: ChartsDigestIconProps) => {
    const { colors } = useTheme();
    const fill = tabBarIconColor(colors, active);
    return (
        <View>
            <Svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                <G
                    transform="translate(2, 2)"
                    testID={
                        active
                            ? 'chartsDigestIconActive'
                            : 'chartsDigestIconInactive'
                    }
                >
                    <Path
                        d="M12 13.5C12 14.3284 12.6716 15 13.5 15C14.3284 15 15 14.3284 15 13.5L15 5.12132L17.4393 7.56066C18.0251 8.14645 18.9749 8.14645 19.5607 7.56066C20.1464 6.97487 20.1464 6.02513 19.5607 5.43934L14.5607 0.439341C14.2794 0.158035 13.8978 0 13.5 0C13.1022 0 12.7206 0.158035 12.4393 0.439341L7.43934 5.43934C6.85355 6.02513 6.85355 6.97488 7.43934 7.56066C8.02513 8.14645 8.97487 8.14645 9.56066 7.56066L12 5.12132L12 13.5Z"
                        fill={fill}
                    />
                    <Path
                        d="M0 13.5C0 12.6716 0.671573 12 1.5 12H6.5C7.32843 12 8 12.6716 8 13.5C8 14.3284 7.32843 15 6.5 15H1.5C0.671573 15 0 14.3284 0 13.5Z"
                        fill={fill}
                    />
                    <Path
                        d="M2 18.5C2 17.6716 2.67157 17 3.5 17H8.5C9.32843 17 10 17.6716 10 18.5C10 19.3284 9.32843 20 8.5 20H3.5C2.67157 20 2 19.3284 2 18.5Z"
                        fill={fill}
                    />
                </G>
            </Svg>
        </View>
    );
};

export default ChartsDigestIcon;