const title = props.title ?? 'Are you sure?'; const deleteButtonText = props.deleteButtonText ?? 'Delete'; const closeButtonText = props.closeButtonText ?? 'Close'; const onClick = props.onClick; const onClose = props.onClose; const OverlayContainer = styled.div` left: 12px; right: 12px; bottom: 0px; top: 40px; position: absolute; z-index: 30; display: flex; background-color: rgba(0, 0, 0, 0.5); justify-content: center; padding-top: 100px; `; const PopupContainer = styled.div` position: relative; background-color: #1d1d21; padding: 1rem; width: 489px; height: fit-content; `; const Text = styled.div` display: flex; column-gap: 0.5rem; align-items: center; color: #fff; font-family: Helvetica Neue; width: 60%; justify-content: center; text-align: center; font-size: 24px; font-style: normal; font-weight: 500; line-height: 120% margin-bottom: 1rem; padding-bottom: 10px; `; const TextContainer = styled.div` display: flex; justify-content: center; width: 100%; `; const Input = styled.input` color: #fff; width: 100%; height: 40px; padding: 8px 60px 8px 16px; margin-top: 1rem; margin-bottom: 1rem; border-radius: 4px; background-color: #0e0e10; border: none; `; const FunctionButton = styled.button` background-color: red; :hover { opacity: 0.8; } color: #fff; border-radius: 4px; padding-top: 0.5rem; padding-bottom: 0.5rem; border: none; width: 100%; `; const CloseButton = styled.div` background-color: transparent; display: flex; justify-content: center; color: #6b7280; :hover { color: #fff; } cursor: pointer; padding-top: 0.5rem; padding-bottom: 0.5rem; border: none; width: 100%; `; return ( <OverlayContainer> <PopupContainer> <TextContainer> <Text>{title}</Text> </TextContainer> <FunctionButton onClick={onClick}>{deleteButtonText}</FunctionButton> <CloseButton onClick={onClose}>{closeButtonText}</CloseButton> </PopupContainer> </OverlayContainer> );