import { BudgetUpdate } from '../../types/budgetUpdate';
import './BudgetUpdatesTable.css';

function BudgetUpdatesTable({ budgetUpdates }: Props) {
  return (
    <table>
      <thead>
        <tr>
          <td>Date</td>
          <td>Quantity</td>
          <td>Period</td>
        </tr>
      </thead>

      <tbody>
        { budgetUpdates.map(Row) }
      </tbody>
    </table>
  );
}

function Row(budgetUpdate: BudgetUpdate) {
  return (
    <tr>
      <td>{budgetUpdate.date.format("DD Mm YYYY")}</td>
      <td>{budgetUpdate.newQuantity.toString()}</td>
      <td>{budgetUpdate.newPeriod}</td>
    </tr>
  )
}

type Props = {
  budgetUpdates: BudgetUpdate[];
}

export { BudgetUpdatesTable };