import React from 'react';
import styled from 'styled-components';

import {
  IDemoCalendarEvent
} from '../../types';

interface IProps {
  items: IDemoCalendarEvent[];
}

const ScEventList = styled.ul`
  margin: 0;
  padding: 0;
  list-style: none;
  
  li {
    color: #fff;
    background: #ccc;
    border-radius: 3px;
    padding-left: 10px;
    margin-bottom: 3px;
    
    &.type-primary {
      background: #c00;
    }
    
    &.type-normal {
      background: #00c;
    }
  }
`;

export default function EventList({
  items
}: IProps): JSX.Element {
  return <ScEventList>
    {items.map((v, i) => <li className={`type-${v.type}`} key={i}>
      {v.content}
    </li>)}
  </ScEventList>;
}