import React, {ReactNode} from 'react';

type ListHeaderColumnProps = {
    children?: ReactNode
    flex?: string
    orderable?: boolean
    align?: 'center' | 'left';
    name?: string
    onClick?: () => void
    activeOrder?: 'ASC' | 'DESC' | null
    minwidth?: string
    type?: string
}

const ListHeaderColumn = ({
                              minwidth,
                              children,
                              flex = '1 1 0',
                              orderable = false,
                              align = 'left',
                              onClick,
                              activeOrder = 'ASC',
                              type
                          }: ListHeaderColumnProps) => {


    return (
        <div className={`list-head-col ${orderable && 'orderable'}`}
             style={{flex: flex, textAlign: align, minWidth: minwidth}} onClick={onClick}>
            <span className={type}>{children}</span>
            {
                orderable &&
                <div className={'order'}>
                    <span className={`up ${activeOrder === 'ASC' && 'active'}`}></span>
                    <span className={`down ${activeOrder === 'DESC' && 'active'}`}></span>
                </div>
            }
        </div>
    );
}

export default ListHeaderColumn;