import React from 'react';
import Carousel from 'react-multi-carousel';
// import 'react-multi-carousel/lib/styles.css';

class Ordenes extends React.Component {


    constructor() {
        super();

        this.state = {
        }

    }



    render() {
        const responsive = {
            superLargeDesktop: {
                // the naming can be any, depends on you.
                breakpoint: { max: 4000, min: 3000 },
                items: 8
            },
            desktop: {
                breakpoint: { max: 3000, min: 1024 },
                items: 6
            },
            tablet: {
                breakpoint: { max: 1024, min: 464 },
                items: 5
            },
            mobile: {
                breakpoint: { max: 464, min: 0 },
                items: 3
            }
        };
        return (
            <React.Fragment>

                <div className="container">
                    <div className="row mb-3">
                        <div className="col-lg-8 col-md-12">
                            <div className="back2">
                                <h2>Ordenes</h2>
                                <div className="row">
                                    <div className="col-lg-3 col-md-12">
                                        <div className="back4">
                                            <h3>Total de Ordenes</h3>
                                            <p className="tiempo">Últimos 30 días</p>
                                            <p className="variable">120</p>
                                        </div>
                                    </div>
                                    <div className="col-lg-6 col-md-12">
                                        <div className="back4">
                                            <h3 className="mb-3">Carrito Promedio</h3>
                                            <div className="row">
                                                <div className="col">
                                                    <p className="variable">120</p>
                                                    <p className="subtitulo">Ingresos</p>
                                                </div>
                                                <div className="col">
                                                    <p className="variable">120</p>
                                                    <p className="subtitulo">Pedidos</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div className="col-lg-3 col-md-12">
                                        <div className="back4">
                                            <h3>Promedio Diario</h3>
                                            <p className="tiempo">Últimos 30 días</p>
                                            <p className="variable">120</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div className="col-lg-4 col-md-12">
                            <div className="back2">
                                <h2>Carritos</h2>
                                <div className="row">
                                    <div className="col">
                                        <div className="back4">
                                            <h3>Cantidad de Carritos</h3>
                                            <p className="tiempo">Abandonados</p>
                                            <p className="variable">180</p>
                                        </div>
                                    </div>
                                    <div className="col">
                                        <div className="back4">
                                            <h3 className="marginx">Tasa de Abandono</h3>
                                            <p className="variable">120</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className="row">
                        <div className="col-lg-8 col-md-12">
                            <div className="back2">
                                <div className="row">
                                    <div className="col">
                                        <div className="titles-art">
                                            <div className="row no-gutters">
                                                <div className="col-auto">
                                                    <p className="variable">10</p>
                                                </div>
                                                <div className="col">
                                                    <h3>TOP ARTÍCULOS <span>MÁS VENDIDOS</span></h3>
                                                </div>
                                            </div>
                                        </div>
                                        <div className="back5">
                                            <div className="row">
                                                <div className="col">
                                                    <div className="prevista-articulo">
                                                        <div className="row">
                                                            <div className="col-lg-4 col-md-12">
                                                                <p className="variable text-left">1</p>
                                                                <h4>MacBook Air 2021</h4>
                                                                <p className="tiempo">740 pedidos</p>
                                                            </div>
                                                            <div className="col-lg-8 col-md-12">
                                                                <p className="cod">Código: 3684</p>
                                                                <img className="image-product-preview" src="/public/img/ld-blanco.png" />
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div> 
                                            </div>
                                            <div className="row">
                                                <div className="col">
                                                    <br /><br />
                                                    <div className=''>
                                                        <Carousel responsive={responsive}>
                                                            <div className="item" onClick={() => {alert('hola')} }> <p className="number">1</p>
                                                                <img className="imagen-peq" src="/public/img/ld-blanco.png" />
                                                                <p className="nombre">Marley Vibration 2</p></div>
                                                            <div className="item"> <p className="number">2</p>
                                                                <img className="imagen-peq" src="/public/img/ld-blanco.png" />
                                                                <p className="nombre">Marley Vibration 2</p></div>
                                                            <div className="item"> <p className="number">3</p>
                                                                <img className="imagen-peq" src="/public/img/ld-blanco.png" />
                                                                <p className="nombre">Marley Vibration 2</p></div>
                                                            <div className="item"> <p className="number">4</p>
                                                                <img className="imagen-peq" src="/public/img/ld-blanco.png" />
                                                                <p className="nombre">Marley Vibration 2</p></div>
                                                            <div className="item"> <p className="number">5</p>
                                                                <img className="imagen-peq" src="/public/img/ld-blanco.png" />
                                                                <p className="nombre">Marley Vibration 2</p></div>
                                                            <div className="item"> <p className="number">6</p>
                                                                <img className="imagen-peq" src="/public/img/ld-blanco.png" />
                                                                <p className="nombre">Marley Vibration 2</p></div>
                                                            <div className="item"> <p className="number">7</p>
                                                                <img className="imagen-peq" src="/public/img/ld-blanco.png" />
                                                                <p className="nombre">Marley Vibration 2</p></div>
                                                            <div className="item"> <p className="number">8</p>
                                                                <img className="imagen-peq" src="/public/img/ld-blanco.png" />
                                                                <p className="nombre">Marley Vibration 2</p></div>
                                                            <div className="item"> <p className="number">9</p>
                                                                <img className="imagen-peq" src="/public/img/ld-blanco.png" />
                                                                <p className="nombre">Marley Vibration 2</p></div>
                                                            <div className="item"> <p className="number">10</p>
                                                                <img className="imagen-peq" src="/public/img/ld-blanco.png" />
                                                                <p className="nombre">Marley Vibration 2</p></div>
                                                        </Carousel>
                                                    </div>
                                                    {/* <ul className="lista-articulos">
                                                            <li className="item">
                                                                <p className="number">2</p>
                                                                <img className="imagen-peq" src="../images/Layer1.png" />
                                                                <p className="nombre">Marley Vibration 2</p>
                                                            </li>
                                                            <li className="item">
                                                                <p className="number">3</p>
                                                                <img className="imagen-peq" src="../images/Layer1.png" />
                                                                <p className="nombre">Marley Vibration 2</p>
                                                            </li>
                                                            <li className="item">
                                                                <p className="number">4</p>
                                                                <img className="imagen-peq" src="../images/Layer1.png" />
                                                                <p className="nombre">Marley Vibration 2 Marley Vibration 2</p>
                                                            </li>
                                                            <li className="item">
                                                                <p className="number">5</p>
                                                                <img className="imagen-peq" src="../images/Layer1.png" />
                                                                <p className="nombre">Marley Vibration 2</p>
                                                            </li>
                                                            <li className="item">
                                                                <p className="number">6</p>
                                                                <img className="imagen-peq" src="../images/Layer1.png" />
                                                                <p className="nombre">Marley Vibration 2</p>
                                                            </li>
                                                            <li className="item">
                                                                <p className="number">7</p>
                                                                <img className="imagen-peq" src="../images/Layer1.png" />
                                                                <p className="nombre">Marley Vibration 2</p>
                                                            </li>
                                                            <li className="item">
                                                                <p className="number">8</p>
                                                                <img className="imagen-peq" src="../images/Layer1.png" />
                                                                <p className="nombre">Marley Vibration 2</p>
                                                            </li>
                                                            <li className="item">
                                                                <p className="number">9</p>
                                                                <img className="imagen-peq" src="../images/Layer1.png" />
                                                                <p className="nombre">Marley Vibration 2</p>
                                                            </li>
                                                            <li className="item">
                                                                <p className="number">10</p>
                                                                <img className="imagen-peq" src="../images/Layer1.png" />
                                                                <p className="nombre">Marley Vibration 2</p>
                                                            </li>
                                                        </ul>
                                                     */}
                                                </div>

                                            </div>

                                        </div>




                                    </div>
                                </div>
                            </div>
                        </div>
                        <div className="col-lg-4 col-md-4">
                            <div className="back2 scroll">
                                <div className="titles-art">
                                    <div className="row no-gutters">
                                        <div className="col-auto">
                                            <p className="variable">10</p>
                                        </div>
                                        <div className="col">
                                            <h3>TOP ARTÍCULOS <span>Abandonados</span></h3>
                                        </div>
                                    </div>
                                </div>
                                <div className="row">
                                    <div className="col">
                                        <div className="back7">
                                            <a className="lista-botones" href="#">
                                                <p className="posicion">1</p>
                                                <h3 className="art-name">Samsung A51</h3>
                                                <p className="codigo">cod: 2345</p>
                                            </a>

                                        </div>
                                        <div className="back7">
                                            <a className="lista-botones" href="#">
                                                <p className="posicion">2</p>
                                                <h3 className="art-name">Cargador Eco</h3>
                                                <p className="codigo">cod: 2345</p>
                                            </a>
                                        </div>
                                        <div className="back7">
                                            <a className="lista-botones" href="#">
                                                <p className="posicion">3</p>
                                                <h3 className="art-name">Samsung A51</h3>
                                                <p className="codigo">cod: 2345</p>
                                            </a>

                                        </div>
                                        <div className="back7">
                                            <a className="lista-botones" href="#">
                                                <p className="posicion">4</p>
                                                <h3 className="art-name">Cargador Eco</h3>
                                                <p className="codigo">cod: 2345</p>
                                            </a>
                                        </div>
                                        <div className="back7">
                                            <a className="lista-botones" href="#">
                                                <p className="posicion">5</p>
                                                <h3 className="art-name">Samsung A51</h3>
                                                <p className="codigo">cod: 2345</p>
                                            </a>

                                        </div>
                                        <div className="back7">
                                            <a className="lista-botones" href="#">
                                                <p className="posicion">6</p>
                                                <h3 className="art-name">Cargador Eco</h3>
                                                <p className="codigo">cod: 2345</p>
                                            </a>
                                        </div>
                                        <div className="back7">
                                            <a className="lista-botones" href="#">
                                                <p className="posicion">7</p>
                                                <h3 className="art-name">Samsung A51</h3>
                                                <p className="codigo">cod: 2345</p>
                                            </a>

                                        </div>
                                        <div className="back7">
                                            <a className="lista-botones" href="#">
                                                <p className="posicion">8</p>
                                                <h3 className="art-name">Cargador Eco</h3>
                                                <p className="codigo">cod: 2345</p>
                                            </a>
                                        </div>
                                        <div className="back7">
                                            <a className="lista-botones" href="#">
                                                <p className="posicion">9</p>
                                                <h3 className="art-name">Samsung A51</h3>
                                                <p className="codigo">cod: 2345</p>
                                            </a>

                                        </div>
                                        <div className="back7">
                                            <a className="lista-botones" href="#">
                                                <p className="posicion">10</p>
                                                <h3 className="art-name">Cargador Eco</h3>
                                                <p className="codigo">cod: 2345</p>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>




                </div>
            </React.Fragment>
        )
    }
};
export default Ordenes;