import { metrics } from 'config';
import { useResponsiveLayout } from 'hooks';
import { Container } from 'components/layout';
import { Rooms } from 'screens';

const { STYLES, Z_INDEX } = metrics;

export const PopUp = () => {
  const { top } = useResponsiveLayout();

  const marginTop = top + STYLES.topBarHeight + 16;

  return (
    <Container
      backgroundColor="base-01"
      width={STYLES.rightPopUpWidth}
      position="absolute"
      right="s"
      top={marginTop}
      bottom="s"
      borderRadius={10}
      overflow="hidden"
      zIndex={Z_INDEX.sideBar}
    >
      <Rooms isPopUp={true} backgroundColor="base-01" />
      {/* <Chat isPopUp={true} backgroundColor="base-01" borderRadius={10} /> */}
    </Container>
  );
};