import React from "react";

import TYPES_QUERY from "../../queries/types/types";
import Query from "../../components/Query";


const TypesItem = ({methods}) => {
    return (
        <div>
            <Query query={TYPES_QUERY} id={null}>
                {({data: {methods}}) => {
                    return (
                        <div className="card-container">
                            {methods.map((method, i) => {
                                return (
                                    <div className="card">
                                        <div className="front">
                                            <h3 className="uk-card-title types-title uk-margin-medium-top">{method.title}</h3>
                                            <img className="uk-position-z-index uk-position-center"
                                                 src={method.image} width="200"
                                                 height="200"
                                                 alt=""/>
                                        </div>
                                        <div className="back">
                                            <h3 className="uk-card-title types-title-back uk-margin-medium-top">{method.title}</h3>
                                            <hr className="types-custom-line-back"/>
                                            <p className="types-custom-desc">
                                                {method.body}
                                            </p>
                                        </div>
                                    </div>
                                )
                            })}
                        </div>
                    )
                }}

            </Query>
        </div>
    );
};

export default TypesItem;