import React from 'react';
import { Icon } from 'UI';
import styles from './alertItem.module.css';

function AlertItem({ alert, onDelete, onEdit }) {
  return (
    <div className={styles.alertItem}>
      <div className={styles.title}>{alert.name}</div>
      <div className={styles.period}>{alert.period}</div>
      <div className={styles.actions}>
        <Icon name="edit" size="16" onClick={() => onEdit(alert)} />
        <Icon name="trash" size="16" onClick={() => onDelete(alert.id)} />
      </div>
    </div>
  );
}

export default AlertItem;