import React from 'react';
import { Card, List } from "antd";
import { useHistory } from 'react-router-dom';
import { DefaultLayout } from '../../../components/layouts'; 

const Reportes = () => {

  const history = useHistory();
  
  const cards = [
    {
      id: 0,
      titulo: "Participación individual",
      img: "/assets/individual.png",
      path: "/administracion/reportes/individual",
    },
    {
      id: 1,
      titulo: "Participación por dependencia",
      img: "/assets/dependencia.png",
      path: "/administracion/reportes/dependencia",
    },
    {
      id: 2,
      titulo: "Participación Comparativa",
      img: "/assets/comparativa.png",
      path: "/administracion/reportes/comparativa",
    },
    {
      id: 3,
      titulo: "Participación Por evento",
      img: "/assets/eventos.png",
      path: "/administracion/reportes/evento",
    },
  ];

  return (
    <DefaultLayout>
      <List 
        grid={{ gutter: 16, column: 5 }}
        dataSource={cards}
        renderItem={(item) => (
          <List.Item>
            <Card
              onClick={() => history.push(item.path)}
              title={item?.titulo}
              style={{ textAlign: "center", cursor: "pointer" }}
            >
              <img
                alt={item.titulo}
                src={item?.img}
                width="100%"
              />
            </Card>
          </List.Item>
        )}
      />
    </DefaultLayout>
  )
}

export default Reportes