import React from 'react';
import PropTypes from 'prop-types';
import { Card, List } from 'antd';
import { UI_CONSTANTS } from '../../constants';

const RecentEventsList = ({ events }) => {
  const renderEventItem = (event) => (
    <List.Item>
      <List.Item.Meta
        title={event.event}
        description={`${event.time} • ${event.service}`}
      />
    </List.Item>
  );

  return (
    <Card title="Recent Events" style={{ height: UI_CONSTANTS.CARD_HEIGHT }}>
      <List
        dataSource={events}
        renderItem={renderEventItem}
      />
    </Card>
  );
};

RecentEventsList.propTypes = {
  events: PropTypes.arrayOf(PropTypes.shape({
    time: PropTypes.string.isRequired,
    event: PropTypes.string.isRequired,
    service: PropTypes.string.isRequired
  })).isRequired
};

export default RecentEventsList;