/**
 * Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved.
 */
import React from 'react';
import {Thead} from './style';
import {TableHeaderCell} from './table-header-cell';
import {ColumnsType} from './props';

export interface ITableHeader {
  columns: ColumnsType;
  sortHeaderColumn: string | null;
  sortAction: (key: string) => void;
}

export const TableHeader = ({columns, sortHeaderColumn, sortAction}: ITableHeader): React.JSX.Element => {
  const renderHeader = (): React.JSX.Element[] =>
    Object.keys(columns).map(
      (key: string, index: number): React.JSX.Element => (
        <TableHeaderCell key={`table-header-cell-${index}`} column={columns[key]} sortHeaderColumn={sortHeaderColumn} sortAction={sortAction} />
      )
    );

  return (
    <Thead>
      <tr>{renderHeader()}</tr>
    </Thead>
  );
};

export default TableHeader;
