import React                  from 'react';
import { Description }        from '@geenee/ui/src/lib/component/description/description.component';
import { StyledTableColumns } from '@geenee/ui/src/lib/component/styled-table';
import { ColumnContainer }    from '@geenee/ui/src/lib/component/styled-table/styles';

type Props<T> = {
    column: StyledTableColumns<T>;
    row: T;
}
export const ColumnRow = <T, >({ column, row }: Props<T>) => (
    <ColumnContainer
        width={ column.width }
        onClick={ () => column.onClick && column.onClick(row) }
        className={ column.className }
    >
        { column.render ? column.render(row) : (
            <Description size='sm'>
                { /* @ts-ignore */ }
                { row[ column.key ] }
            </Description>
        ) }
    </ColumnContainer>
);