text: import styled from '@emotion/styled';
  import { graphql, useStaticQuery } from 'gatsby';
  import React from 'react';
  
  const ListadoIconos = styled.ul`
      display: flex;
      justify-content: space-between;
      max-width: 500px;
      margin: 3rem auto 0 auto;
  
      li{
          display: flex;
          img{
              margin-right: 1rem;
          }
      }
  `;
  
  
  const Iconos = ({wc, estacionamiento, habitaciones}) => {
      const {iconos} = useStaticQuery(graphql`
        query{
              iconos: allFile(filter: {relativeDirectory: {eq:"iconos"}}){
                  edges{
                  node{
                              id
                      publicURL
                  }
                  }
              }
          }  
      `)
  
      const imagenesIconos = iconos.edges;
      return (
          <ListadoIconos>
              <li>
                  <img src={imagenesIconos[2].node.publicURL} alt='icono wc'/>
                  <p>{wc}</p>
              </li>
              <li>
                  <img src={imagenesIconos[1].node.publicURL} alt='icono wc'/>
                  <p>{estacionamiento}</p>
              </li>
              <li>
                  <img src={imagenesIconos[0].node.publicURL} alt='icono wc'/>
                  <p>{habitaciones}</p>
              </li>
          </ListadoIconos>
      )
  }
  
  export default Iconos
  