import React from 'react';
import styled from 'styled-components';

interface IContainerStyles {
  height?: string;
  width?: string;
}

interface IProps {
  id: string;
  children: React.ReactNode;
  styles?: IContainerStyles;
  centerContent?: boolean;
}

export const TabBody: React.FC<IProps> = ({
  id,
  children,
  styles,
  centerContent,
}) => {
  return (
    <Container styles={styles} data-tab-id={id} centerContent={centerContent}>
      {children}
    </Container>
  );
};

interface IContainerProps {
  styles?: IContainerStyles;
  centerContent?: boolean;
}

const Container = styled.div<IContainerProps>`
  width: ${props => props.styles?.width || '100%'};
  height: ${props => props.styles?.height || 'auto'};
  overflow-y: auto;
  display: ${props => (props.centerContent ? 'flex' : 'block')};
  justify-content: ${props => (props.centerContent ? 'center' : 'initial')};
  align-items: ${props => (props.centerContent ? 'center' : 'initial')};
`;
