import React from 'react';
import { StyleSheet, View } from 'react-native';

const SkeletonItem = () => {
    return (
        <View style={styles.container}>
            <View style={styles.avatar} />
            <View style={styles.content}>
                <View style={styles.title} />
                <View style={styles.subtitle} />
            </View>
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flexDirection: 'row',
        alignItems: 'center',
        padding: 16,
        backgroundColor: '#fff',
    },
    avatar: {
        width: 48,
        height: 48,
        borderRadius: 24,
        backgroundColor: '#f0f0f0',
    },
    content: {
        flex: 1,
        marginLeft: 12,
        justifyContent: 'center',
    },
    title: {
        height: 16,
        width: '60%',
        backgroundColor: '#f0f0f0',
        marginBottom: 8,
        borderRadius: 4,
    },
    subtitle: {
        height: 14,
        width: '80%',
        backgroundColor: '#f5f5f5',
        borderRadius: 4,
    },
});

export default React.memo(SkeletonItem);