import { Box, Table } from '@wix/design-system';
import React, { ReactNode } from 'react';
import { ToolbarCollectionContentAutoSizer } from '../ToolbarCollectionContentAutoSizer';
import { classes, st } from '../common.st.css.js';

export interface CollectionTableContentCardProps {
  children?: ReactNode;
}

export function CollectionTableContentCard(
  props: CollectionTableContentCardProps,
) {
  const { children } = props;

  return (
    // wrapping with Card is WSR way to make the sticky table header not to add extra border between the header and the content https://www.docs.wixdesignsystem.com/?path=/story/components-lists-table--table#Sticky_Toolbar_&_Sub-toolbar
    <Box
      direction="vertical"
      backgroundColor="D80"
      borderRadius="0px 0px 8px 8px"
      overflow="hidden"
      className={st(classes.column, classes.fullHeight)}
    >
      <ToolbarCollectionContentAutoSizer>
        <Table.Content titleBarVisible={false} dataHook="table-content" />
        {children}
      </ToolbarCollectionContentAutoSizer>
    </Box>
  );
}