import React from 'react';
import { Box, Text } from '@nova-hf/ui';
import Image from 'next/image';

type BaseLayoutProps = {
  onClick?: () => void;
  children: React.ReactNode;
  emoji?: string;
  hasBackground?: boolean;
  title: string;
  subtitle: string;
};

const BaseLayout = ({ children, emoji, hasBackground, title, subtitle }: BaseLayoutProps) => {
  return (
    <Box
      position="relative"
      overflow="hidden"
      display="flex"
      flexDirection="column"
      height="fitContent"
      paddingX={2}
      paddingY={2}
      backgroundColor={hasBackground ? 'grey200' : 'transparent'}
      marginBottom={2}
      borderStyle="solid"
      borderWidth={'2px'}
      borderColor={hasBackground ? 'transparent' : 'grey200'}
      transition="slow"
      width="100%"
      style={{
        borderRadius: '16px',
      }}
    >
      <Box
        display="flex"
        flexDirection="column"
        alignItems="flex-start"
        paddingBottom={2}
        paddingLeft={2}
      >
        <Text color="black100" variant="subHeading">
          {title}
        </Text>
        <Text color="grey500" variant="pMediumRegular">
          {subtitle}
        </Text>
      </Box>
      {emoji && (
        <Box position="absolute" top={-1} right={-1} zIndex={'customermenu'}>
          <Image src={emoji} alt={'emoji'} width={64} height={77} />
        </Box>
      )}
      {children && (
        <Box paddingBottom={2} paddingLeft={2} display="flex" flexDirection="column">
          {React.Children.map(children, (child, index) => (
            <Box
              key={index}
              borderColor="grey300"
              borderWidth="1px"
              borderTopStyle={'solid'}
              paddingY={2}
            >
              {child}
            </Box>
          ))}
        </Box>
      )}
    </Box>
  );
};

export default BaseLayout;