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

export function GridMode(props) {

    let { setPuesto, setEdit, setDelete, setShow, data, index, showing } = props;

    const op = {
        set: setPuesto,
        edit: setEdit,
        suprime: setDelete,
        show: setShow,
    }

    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
                                            plaza={plaza}
                                            operations={op} />
                                    </div>
                                </Col>
                            </Grow>
                        )
                    }) : <div></div>
            }
        </React.Fragment>
    )
}