import React, { useState, useEffect } from 'react';
import { Text, View, ScrollView, StyleSheet } from 'react-native';
import { FAB, Button, Card, Title, IconButton } from 'react-native-paper';
import API from './../API.js';
import UserName from './UserName.js';
import Media from './Media.js';


let Comment = ({ comment }) => {
    return (
        <Card style={styles.comment}>
            <Card.Content>
                <Text style={styles.userName}>
                    <UserName profileid={comment.profileid} />
                    <Button
                        icon="heart-o"
                        small
                        style={styles.likeComment}
                        onPress={() => console.log('Pressed')}
                    />
                </Text>
                <Text>{comment.content}</Text>
            </Card.Content>
        </Card>
    );
}

export default Comment;

const styles = StyleSheet.create({
    comment: {
        margin: 8,
        marginTop: 0,
    },
    userName: {
        fontSize: 14,
        fontWeight: 'bold',
        marginBottom: 5,
    },
    likeComment: {
        position: 'absolute',
        margin: 16,
        right: 0,
        top: 0,
    },
});