import React from 'react';
import styled, { keyframes } from 'styled-components';

const slideIn = keyframes`
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
`;

const NotificationContainer = styled.div`
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 10px;
`;

const NotificationItem = styled.div`
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: ${({ type }) => type === 'error' ? '#FEE2E2' : '#ECFDF5'};
  color: ${({ type }) => type === 'error' ? '#DC2626' : '#059669'};
  border-left: 4px solid ${({ type }) => type === 'error' ? '#DC2626' : '#059669'};
  padding: 1rem 1.5rem;
  border-radius: 0.5rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  animation: ${slideIn} 0.3s ease-out;
  min-width: 300px;
  max-width: 400px;
`;

const CloseButton = styled.button`
  background: transparent;
  border: none;
  color: currentColor;
  cursor: pointer;
  padding: 4px;
  margin-left: 12px;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  
  &:hover {
    background: rgba(0, 0, 0, 0.1);
  }

  &::before {
    content: '×';
    font-size: 20px;
    font-weight: bold;
  }
`;

const Message = styled.span`
  font-size: 14px;
  font-weight: 500;
`;

const Notification = ({ notifications, removeNotification }) => {
  return (
    <NotificationContainer>
      {notifications.map((notification) => (
        <NotificationItem key={notification.id} type={notification.type}>
          <Message>{notification.message}</Message>
          <CloseButton
            onClick={() => removeNotification(notification.id)}
            aria-label="Close notification"
          />
        </NotificationItem>
      ))}
    </NotificationContainer>
  );
};

export default Notification;