/**
 * @file
 * @copyright 2020 Aleksej Komarov
 * @license MIT
 */

import { Flex } from 'tgui/components';

export const Notifications = (props) => {
  const { children } = props;
  return <div className="Notifications">{children}</div>;
};

const NotificationsItem = (props) => {
  const { rightSlot, children } = props;
  return (
    <Flex align="center" className="Notification">
      <Flex.Item className="Notification__content" grow={1}>
        {children}
      </Flex.Item>
      {rightSlot && (
        <Flex.Item className="Notification__rightSlot">{rightSlot}</Flex.Item>
      )}
    </Flex>
  );
};

Notifications.Item = NotificationsItem;