import type { ReactNode } from 'react'

import { T9n } from 'features/T9n'

import {
  Header,
  Footer,
  ScBody,
  Modal,
  ScApplyButton,
  ScHeaderTitle,
  ScText,
  Wrapper,
} from './styled'

type Props = {
  buttonName?: string,
  children?: ReactNode,
  headerName?: string,
  icon?: ReactNode,
  isModalOpen: boolean,
  mainText: string,
  onHandle?: () => void,
  withCloseButton: boolean,
}

export const SimplePopup = (props: Props) => {
  const {
    buttonName,
    children,
    headerName,
    icon,
    isModalOpen,
    mainText,
    onHandle,
    withCloseButton,
  } = props

  return (
    <Modal
      isOpen={isModalOpen}
      withCloseButton={withCloseButton}
    >
      <Wrapper>
        <Header>
          {icon}
          <ScHeaderTitle>
            <T9n t={headerName ?? ''} />
          </ScHeaderTitle>
        </Header>
        <ScBody>
          {children || (
            <ScText>
              <T9n t={mainText} />
            </ScText>
          )}
        </ScBody>
        {buttonName
        && (
          <Footer>
            <ScApplyButton onClick={onHandle}>
              <T9n t={buttonName} />
            </ScApplyButton>
          </Footer>
        )}
      </Wrapper>
    </Modal>
  )
}