import { jsx as _jsx } from "react/jsx-runtime";
import styled, { css } from 'styled-components';
import { spacing } from '../../spacing';
import { zIndex } from '../../style/theme';
import { Notification, } from './Notification.component';
export const TOP_LEFT = 'tl';
export const TOP_RIGHT = 'tr';
export const BOTTOM_LEFT = 'bl';
export const BOTTOM_RIGHT = 'br';
const NotificationsContainer = styled.div `
  position: fixed;
  z-index: ${zIndex.notification};
  margin: ${spacing.r24};
  ${(props) => {
    switch (props.position) {
        case TOP_LEFT:
            return css `
          top: 0;
          left: 0;
        `;
        case BOTTOM_RIGHT:
            return css `
          bottom: 0;
          right: 0;
        `;
        case BOTTOM_LEFT:
            return css `
          bottom: 0;
          left: 0;
        `;
        default:
            return css `
          top: 0;
          right: 0;
        `;
    }
}};
`;
function Notifications({ position, notifications, onDismiss, ...rest }) {
    return (_jsx(NotificationsContainer, { className: "sc-notifications", position: position, ...rest, children: notifications.map((notification) => (_jsx(Notification, { ...notification, onDismiss: onDismiss }, notification.uid))) }));
}
export { Notifications };
