import React from 'react';

import icons from 'constants/icons';

export default ({ row, dateType, onClick }) => {
    return (
        <div className="flex-list-row">
            <div className="content">
                <div className="list-row-data">
                    <div className="record-type">
                        <div className="icon">
                            { icons[row.type] || icons.empty }
                            <div className={`status-indicator ${row.status || "pending"}`}/>
                        </div>
                        <div className="date">{ dateType == "BILLED_DATE" ? formatDate(row.billedDate) : formatDate(row.dueDate) }</div>
                    </div>
                    <div className="main">
                        <div className="main-value">
                            { row.name }
                        </div>
                        <div className="additional-info">
                            { row.description || " " }
                        </div>
                    </div>
                    <div className="right main-value p5">
                        { formatMoney(row.amount, row.currency) }
                    </div>
                </div>
            </div>
            <div className="actions">
                <button className="icon" onClick={ () => handleBillableClick(row.type, row.objectId, router) }>{icons.leftMenu}</button>
            </div>
        </div>
    );
}