/**
 * Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved.
 */
import {JSX} from 'react';
import {
  ITableWithLoadMoreHeader,
  ITableWithPaginationHeader,
  TableHeaderKey
} from 'interfaces/tableProps';
import {ScreenHeader, ScreenHeaderControls, HeaderControlWrapper, HeaderTitle} from './style';

type ScreenHeaderProps = ITableWithLoadMoreHeader | ITableWithPaginationHeader;

export interface ITableScreenHeader {
  title: string;
  subtitle?: string;
  screenHeader: ScreenHeaderProps;
  renderControl: (screenHeader: ScreenHeaderProps, key: TableHeaderKey) => JSX.Element | null;
}

export const TableScreenHeader = ({
  title,
  subtitle = '',
  screenHeader,
  renderControl
}: ITableScreenHeader): JSX.Element => {
  return (
    <ScreenHeader className="table-header">
      <HeaderTitle>
        <h2>{title}</h2>
        {subtitle && <p>{subtitle}</p>}
      </HeaderTitle>
      <ScreenHeaderControls>
        {Object.keys(screenHeader).map(key => {
          const headerControl = screenHeader[key].render
            ? screenHeader[key].render(key)
            : renderControl(screenHeader, key as TableHeaderKey);

          return headerControl ? (
            <HeaderControlWrapper key={key}>{headerControl}</HeaderControlWrapper>
          ) : null;
        })}
      </ScreenHeaderControls>
    </ScreenHeader>
  );
};

export default TableScreenHeader;