import React, { useEffect, useState} from 'react';

import { Link } from "react-router-dom";

import _service from '@netuno/service-client';

import { Button, notification } from 'antd';

import { CheckCircleOutlined } from '@ant-design/icons';

import "./index.less";

export default ({ data })=> {
    const [following, setFollowing] = useState(data.following);
    const onFollow = ()=> {
        _service({
            method: 'PUT',
            url: "api/communities/follow",
            data: {uid: data.uid},
            success: (response) => {
                setFollowing(response.json.result);
            },
            fail: (e) => {
                console.log("Service Error", e);
                notification["error"]({
                    message: 'Informações',
                    description: 'Não foi possível carregar a informação.',
                });
            }
        });
    };
    const servicePrefix = _service.config().prefix;
    return (
    <li style={{ backgroundImage: `url(${ servicePrefix }/api/communities/image?uid=${ data.uid })` }}>
        <h1><Link to={`/community/${data.uid}`}>{ data.name }</Link> { following ? <CheckCircleOutlined /> : null }</h1>
    </li>
    );
};
