import { Image, Button, Icon} from 'semantic-ui-react';
import Style from './card1.module.css';
import Photo from '../food.jpg';

// https://hackernoon.com/react-stateless-functional-components-nine-wins-you-might-have-overlooked-997b0d933dbc
export default props => {
    const {
        image = Photo,
        title = 'Experimente nosso Bife Grelhado',
        description = 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt'
    } = props;

    return (
        <div className={Style.card}>
            <Image src={image} />
                <div className={Style.content}>
                    {title && (
                        <h2 className={Style.title}> {title}</h2>
                    )}
                    {description && (
                        <div className={Style.description}> {description} </div>
                    )}
                    <div className={Style.btnGroup}>
                        <Button basic size='tiny' color="green">
                            <Icon name="heart"/> Gostei
                        </Button>
                        <Button basic size='tiny' color="red">
                            <Icon name="cancel"/> Não Gostei
                        </Button>
                    </div>
                </div>
            </div>
        );
};