import React from "react";
import { Grow } from '@mui/material';
import { Col } from 'react-bootstrap'
import { PuestoCard } from './Card';

export function GridMode(props) {

    let { data, index, showing, toggle } = props;

    return (
        <React.Fragment>
            {
                data.length && showing === 'grid' ?
                    data[index].map(plaza => {
                        return (
                            <Grow in={true} style={{ transformOrigin: '0 0 0' }} timeout={500} key={plaza.id} >
                                <Col lg="4" md="6" sm="6" xs="12" >
                                    <div style={{ padding: 15 }}>
                                        <PuestoCard toggle={toggle} plaza={plaza} />
                                    </div>
                                </Col>
                            </Grow>
                        )
                    }) : <div></div>
            }
        </React.Fragment>
    )
}