import React from 'react';
import { Box, LoadingBar, ThemeColorType } from '@nova-hf/ui';
import { Emoji } from 'assets/images/mobile-signup';
import Image from 'next/image';

type BaseWrapperProps = {
  onClick?: () => void;
  children: React.ReactNode;
  emoji?: Emoji;
  hasBackground?: boolean;
  allowOverflow?: boolean;
  withoutPadding?: boolean;
  hasLoading?: boolean;
  color?: ThemeColorType;
};

const BaseWrapper = ({
  children,
  emoji,
  hasBackground,
  color = 'grey200',
  allowOverflow = false,
  withoutPadding = false,
  hasLoading = false,
}: BaseWrapperProps) => {
  return (
    <Box
      position="relative"
      display="flex"
      flexDirection="column"
      height="fitContent"
      paddingX={2}
      paddingY={withoutPadding ? 0 : 2}
      backgroundColor={hasBackground ? color : 'transparent'}
      marginBottom={2}
      borderStyle="solid"
      borderWidth={'2px'}
      borderColor={hasBackground ? 'transparent' : color}
      transition="slow"
      width="100%"
      style={{
        borderRadius: '16px',
        overflow: allowOverflow ? 'visual' : 'hidden',
      }}
    >
      {hasLoading && (
        <Box position="absolute" top={0} left={0} width="100%">
          <LoadingBar progressBar={{ percentage: 100, thickness: 2 }} />
        </Box>
      )}
      {!!emoji && (
        <Box position="absolute" top={0} right={0} zIndex={'customermenu'}>
          <Image
            src={require(`/src/assets/images/mobile-signup/${emoji}.png`).default.src}
            alt={emoji}
            width={80}
            height={80}
          />
        </Box>
      )}
      {children && (
        <Box display="flex" flexDirection="column">
          {children}
        </Box>
      )}
    </Box>
  );
};

export default BaseWrapper;