import { ListItem } from '../../layout';
import { ReactText } from 'react';
import * as React from 'react';
import { StyledList, Header, Content } from './styled-list';

interface Props {
    style?: React.CSSProperties;
    fullWidth?: boolean;
    items?: [
        {
            id: ReactText,
            name: string,
            content: React.ReactNode,
        }
    ],
    title?: string;
    children?: React.ReactNode;
}

const List = (props: Props) => (
    <StyledList
        style={props.style}
    >
        {props.title &&
            <Header>
                {props.title}
            </Header>
        }
        <Content>
            {props.items && props.items.map( item => (
                <ListItem id={item.id.toString()}>
                    {item.content}
                </ListItem>
            ))}
            {!props.items && props.children}
        </Content>

    </StyledList>
);

export default List;