import React                                   from 'react';
import { StyledTableColumns, TableActionName } from '@geenee/geenee-ui/src/lib/component/styled-table';
import { ColumnRow }                           from '@geenee/geenee-ui/src/lib/component/styled-table/components/ColumnRow';
import { RowActions }                          from '@geenee/geenee-ui/src/lib/component/styled-table/components/RowActions';
import { RowContainer }                        from '@geenee/geenee-ui/src/lib/component/styled-table/styles';

type Props<T> = {
    columns: StyledTableColumns<T>[];
    row: T;
    rowActions?: { id: TableActionName; onClick: (item: T) => void }[];
    style?: React.CSSProperties;
}
export const DataRow = <T, >({ columns, row, rowActions, style }: Props<T>): JSX.Element => (
    <RowContainer
        row
        valign='center'
        fullWidth
        height='64px'
        style={ style }
    >
        { columns.map((column) => (
            <ColumnRow
                column={ column }
                row={ row }
                key={ column.key }
            />
        )) }
        <RowActions<T> rowActions={ rowActions } row={ row } />
    </RowContainer>
);