import React                  from 'react';
import { StyledTableColumns } from '@geenee/ui/src/lib/component/styled-table';
import {
    ActionColumn,
    ColumnContainer,
    ColumnLabel,
    RowContainer
} from '@geenee/ui/src/lib/component/styled-table/styles';

export const TableHeader = <T, >({ disabled, columns, hasActions }: {
    columns: StyledTableColumns<T>[]; hasActions: boolean; disabled?: boolean; }) => (
        <RowContainer row valign='center' fullWidth height='55px' className='table-header'>
            { columns.map((column, index) => (
                <ColumnContainer
                    width={ column.width }
                    key={ `header_${ index }` }
                >
                    <ColumnLabel disabled={ disabled }>
                        { column.label }
                    </ColumnLabel>
                </ColumnContainer>
            )) }
            { hasActions ? (
                <ActionColumn>
                    <ColumnLabel disabled={ disabled }>
                        Actions
                    </ColumnLabel>
                </ActionColumn>
            ) : <></> }
        </RowContainer>
    );