import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import PropTypes from 'prop-types';
import { MDBBtn, MDBCard, MDBCardBody, MDBCardTitle, MDBCol } from 'mdbreact';

export default class ServerCard extends Component {
    render() {
        return(
            <React.Fragment>
                <MDBCol size={6}>
                    <MDBCard className="server-card">
                        <MDBCardBody>
                            <img
                                width="200px"
                                alt={`Icon of ${this.props.guild.name}`}
                                className="server-card-image"
                                src={this.props.guild.icon ?
                                    `https://cdn.discordapp.com/icons/${this.props.guild.id}/${this.props.guild.icon}.png?size=4096` :
                                    `https://cdn.discordapp.com/embed/avatars/3.png`
                                }
                            />
                            
                            <MDBCardTitle><h6><strong>{this.props.guild.name}</strong></h6></MDBCardTitle>
                            <Link to={`/server/${this.props.guild.id}`}>
                                <MDBBtn color="primary">Manage</MDBBtn>
                            </Link>
                        </MDBCardBody>
                    </MDBCard>
                </MDBCol>
            </React.Fragment>
        )
    }
}

ServerCard.propTypes = {
    guild: PropTypes.object
}