import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import PropTypes from 'prop-types';
import { Card, Button } from 'react-bootstrap';

export default class ServerCard extends Component {
    render() {
        return(
            <React.Fragment>
                <Card className="p-3 dark-card" style={{ width: '18rem' }}>
                    <Card.Img variant="top" 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` } />
                    <Card.Body>
                        <Card.Title>{this.props.guild.name}</Card.Title>
                        <Link to={`/server/${this.props.guild.id}`}>
                            <Button variant="primary">Manage</Button>
                        </Link>
                    </Card.Body>
                </Card>
                
                

                {/* <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
}