memowake-front/components/file-upload/upload-progress/progress-bar.tsx

import React from 'react';
import { useTranslation } from 'react-i18next';
import { ActivityIndicator, Image, StyleSheet, Text, View } from 'react-native';
import * as Progress from 'react-native-progress';

interface UploaderProgressBarProps {
    imageUrl: string;
    uploadedCount: number;
    totalCount: number;
}

const UploaderProgressBar: React.FC<UploaderProgressBarProps> = ({
    imageUrl,
    uploadedCount,
    totalCount,
}) => {
    const progress = totalCount > 0 ? (uploadedCount / totalCount) * 100 : 0;
    const { t } = useTranslation();

    return (
        <View style={styles.container}>
            <View style={styles.imageContainer}>
                <Image source={{ uri: imageUrl }} style={styles.thumbnail} />
            </View>
            <View style={styles.progressSection}>
                <View style={styles.progressInfo}>
                    <Text style={styles.statusText}>{t('upload.uploading', { ns: 'upload' })}</Text>
                    <ActivityIndicator size={12} color="#4A4A4A" className='ml-2' />
                </View>
                <Progress.Bar
                    progress={progress / 100}
                    width={null} // Fills the container
                    height={4}
                    color={'#4A4A4A'}
                    unfilledColor={'rgba(255, 255, 255, 0.5)'}
                    borderWidth={0}
                    style={styles.progressBar}
                />
            </View>
            <Text style={styles.countText}>{`${uploadedCount}/${totalCount}`}</Text>
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flexDirection: 'row',
        alignItems: 'center',
        backgroundColor: '#F5B941', // From image
        borderRadius: 10,
        paddingHorizontal: 12,
        paddingVertical: 8,
        marginHorizontal: 0,
        height: 60,
    },
    imageContainer: {
        width: 40,
        height: 40,
        justifyContent: 'center',
        alignItems: 'center',
        // This container helps with the skewed frame effect
        transform: [{ rotate: '-5deg' }],
        marginRight: 8,
    },
    thumbnail: {
        width: 36,
        height: 36,
        borderRadius: 8,
        borderWidth: 2,
        borderColor: 'white',
        transform: [{ rotate: '5deg' }], // Counter-rotate to keep image straight
    },
    progressSection: {
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'center',
        marginRight: 15,
    },
    progressInfo: {
        flexDirection: 'row',
        alignItems: 'center',
        marginBottom: 4,
    },
    activityIndicator: {
        marginLeft: 5,
    },
    progressText: {
        color: '#4A4A4A',
        fontWeight: 'bold',
        fontSize: 12,
        marginRight: 8,
    },
    statusText: {
        color: '#4A4A4A',
        fontSize: 12,
    },
    progressBar: {
        width: '100%',
    },
    countText: {
        color: '#4A4A4A',
        fontWeight: 'bold',
        fontSize: 16,
    },
});

export default UploaderProgressBar;