import { CgCloseO } from 'react-icons/cg';

import styles from './FeedItem.module.css';

import Card from '../';
import Api from '../../../services/Api';
import Notify from '../../../Utility/Notify';

const FeedItem = ({ id, imageName, message, userName, refresh }) => {

    const handleDelete = async () => {
        const { data: { result: { status } } } = await Api.delete(`/delete/post/${id}`);

        if (status === 'success') {
            Notify('Post excluído!', 'success');
            refresh();
        }

    }

    return (
        <Card body={
            (
                <div className={styles.container}>
                    <div className={styles.header}>
                        <CgCloseO
                            className={styles.close}
                            onClick={handleDelete}
                        />
                    </div>
                    <div className={styles.content}>
                        <img
                            className={styles.image}
                            src={`https://buildbox-blog-api.herokuapp.com/${imageName}`}
                        />

                        <div className={styles.info}>
                            <div className={styles.message}>
                                <p>{message}</p>
                            </div>

                            <div className={styles.sendUser}>
                                <label>Enviado por</label>
                                <span>{userName}</span>
                            </div>
                        </div>
                    </div>
                </div>
            )
        }
        />
    );
}

export default FeedItem;
