import styled from '@emotion/styled';
import { useRef } from 'react';

import { CloseIcon } from '@/icons';

import Button, { ButtonSize, ButtonVariant } from '../button/Button';

const Positioner = styled.div`
  position: relative;
  padding-bottom: 13px;
  &:after {
    z-index: -1;
    content: '';
    display: block;
    position: absolute;
    bottom: 7px;
    left: 50%;
    margin-left: -7.5px;
    width: 15px;
    height: 15px;
    transform: rotate(45deg);
    border-radius: 2px;
    background-color: var(--color-background-secondary);
  }
`;

const Wrapper = styled.div`
  display: flex;
  flex-direction: column;
  gap: 5px;
  background-color: var(--color-background-secondary);
  border-radius: 16px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
`;

const Header = styled.div`
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 10px 0 15px;
  font-size: 12px;
  color: var(--color-foreground-secondary);
`;

export default function TransportPopup({
  title,
  onClose,
  children,
}: {
  title: React.ReactNode[] | React.ReactNode;
  onClose: () => void;
  children: React.ReactNode[] | React.ReactNode;
}) {
  const wrapperRef = useRef<HTMLDivElement>(null);

  return (
    <Positioner>
      <Wrapper
        ref={wrapperRef}
        onKeyDown={(e) => {
          if (e.key === 'Escape') {
            onClose();
          } else if (e.key === 'Enter') {
            onClose();
          }
        }}
      >
        <Header>
          <div>{title}</div>
          <Button
            onClick={onClose}
            icon={CloseIcon}
            variant={ButtonVariant.Tertiary}
            size={ButtonSize.Mini}
          />
        </Header>
        {children}
      </Wrapper>
    </Positioner>
  );
}