import React, { ReactElement, JSX } from 'react';
import Box from '@mui/material/Box';
import { SxProps, Theme } from '@mui/material';

interface BackstoryElementProps {
  // setSnack: SetSnackType,
  // submitQuery: ChatSubmitQueryInterface,
  sx?: SxProps<Theme>;
}

interface BackstoryPageProps extends BackstoryElementProps {
  route?: string;
  setRoute?: (route: string) => void;
}

interface BackstoryTabProps {
  label?: string;
  path: string;
  children?: ReactElement<BackstoryPageProps>;
  active?: boolean;
  className?: string;
  tabProps?: {
    label?: string;
    sx?: SxProps;
    icon?: string | ReactElement<unknown, string> | undefined;
    iconPosition?: 'bottom' | 'top' | 'start' | 'end' | undefined;
  };
}

function BackstoryPage(props: BackstoryTabProps): JSX.Element {
  const { className, active, children } = props;

  return (
    <Box
      className={className || 'BackstoryTab'}
      sx={{ display: active ? 'flex' : 'none', p: 0, m: 0, borders: 'none' }}
    >
      {children}
    </Box>
  );
}

export type { BackstoryPageProps, BackstoryTabProps, BackstoryElementProps };

export { BackstoryPage };