import React from "react";
import CardApartment from '../CardApartament';
import styled from 'styled-components';

const ListElement = styled.li`
    border-bottom: 1px solid;
    border-image: linear-gradient(to right, transparent 33.5%, #c2c4c2 33.5%) 100% 1;
    box-sizing: border-box;
    list-style-type: none;
    padding: 20px 0;

    & section {
        margin-top: 0;
    }
`;


/**
 * 
 * @param {{
 *      list: import('../../API/Apartment').Apartment[]
 * }} props 
 */
export default function ApartmentsList(props) {
    const list = props.list;

    if (list.length == 0) return null;

    return (
        <ul>
            {
                list.map((el, i) => {
                    return (
                        <ListElement key={i}>
                            <CardApartment results={el} />
                        </ListElement>
                    );
                })
            }
        </ul>
    )
}