import React from 'react';
import { View } from 'react-native';
import { createShimmerPlaceholder } from 'react-native-shimmer-placeholder';
import LinearGradient from 'react-native-linear-gradient';
import { safeWithTheme, useTheme } from '../../branding';
import { SKELETON_HEIGHT, SKELETON_WIDTH } from './constants';
import themedStyles from './styles';

const ShimmerPlaceholder = createShimmerPlaceholder(LinearGradient);

const FiltersSummarySkeleton: React.FC = () => {
    const { theme, colors } = useTheme();
    const styles = themedStyles[theme];

    return (
        <View style={styles.container} accessibilityLabel={'FiltersSummary'}>
            <ShimmerPlaceholder
                containerProps={{ testID: 'filters-summary-skeleton' }}
                width={SKELETON_WIDTH}
                height={SKELETON_HEIGHT}
                shimmerStyle={styles.skeleton}
                shimmerColors={[
                    colors.midnight850,
                    colors.midnight750,
                    colors.midnight850
                ]}
            />
        </View>
    );
};

export default safeWithTheme(FiltersSummarySkeleton);