<div class="income-category-detail__container">
    @if(showCheckBox()) {
        <div class="income-category-detail__checkbox">
            <mw-checkbox (checked)="checked.emit($event)"></mw-checkbox>
        </div>
    }
    <div class="detail">
        <div class="icon">
            <mw-circled-icon
                [symbol]="iconProps().symbol"
                [backgroundColor]="iconProps().backgroundColor"
                [color]="iconProps().color"
            ></mw-circled-icon>
        </div>
        <div>
        <mw-expense-icome-detail-box>
            <mw-typography
                color="var(--mw-gray-500)"
                size="1.2rem"
                weight="800"
            >{{whom()}}</mw-typography>
            <mw-typography
                color="var(--mw-gray-500)"
                size="1.2rem"
            >{{category()}}</mw-typography>
            <mw-typography
                color="var(--mw-gray-400)"
                size="1.1rem"
                font="var(--mw-font-light-italic)"
                weight="800"
            >{{description()}}</mw-typography>
        </mw-expense-icome-detail-box>
        </div>
        <div class="amount">
            <mw-money-text  [color]="amountProps().color" [amount]="amountProps().amount"></mw-money-text>
            <mw-money-text  size="1rem" color="var(--mw-gray-300)" [amount]="acumAmount()"></mw-money-text>
        </div>
    </div>
</div>