<script lang="ts">
  import i18n from '$lib/i18n'

  let props: {
    transactions: {
      id: string
      begin: Date
      end: Date
      chargepoint: {
        name: string
        id: string
      }
      energyAmmount: number
      cost: number
    }[]
  } = $props()
</script>

<div class="overflow-x-auto mt-4 bg-base-100 rounded-md">
  <table class="table">
    <thead>
      <tr>
        <th>{$i18n.t('common:transactionTable.headerDate')}</th>
        <th>{$i18n.t('common:transactionTable.headerChargepoint')}</th>
        <th>{$i18n.t('common:transactionTable.headerEnergyTotal')}</th>
        <th>{$i18n.t('common:transactionTable.headerCost')}</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      {#if props.transactions.length > 0}
        {#each props.transactions as transaction}
          <tr>
            <td>
              <div class="flex items-center gap-3">
                <div>
                  <p>
                    {$i18n.t('common:transactionTable.startTime', {
                      time: transaction.begin,
                      formatParams: {
                        time: {
                          year: 'numeric',
                          month: 'numeric',
                          day: 'numeric',
                          hour: 'numeric',
                          minute: 'numeric',
                          second: 'numeric',
                        },
                      },
                    })}
                  </p>
                  <p>
                    {$i18n.t('common:transactionTable.endTime', {
                      time: transaction.end,
                      formatParams: {
                        time: {
                          year: 'numeric',
                          month: 'numeric',
                          day: 'numeric',
                          hour: 'numeric',
                          minute: 'numeric',
                          second: 'numeric',
                        },
                      },
                    })}
                  </p>
                </div>
              </div>
            </td>
            <td>
              <a href="/chargepoint/{transaction.chargepoint.id}" class="btn btn-sm btn-primary">
                <i class="bi bi-plug-fill text-lg"></i>
                {transaction.chargepoint.name}
              </a>
            </td>
            <td class="font-bold">{transaction.energyAmmount} kWh</td>
            <td class="font-bold">{transaction.cost} €</td>
            <th>
              <a href="/transaction/{transaction.id}" class="btn btn-sm btn-primary">
                {$i18n.t('common:transactionTable.detailButton')}
                <i class="bi bi-arrow-right"></i>
              </a>
            </th>
          </tr>
        {/each}
      {/if}
    </tbody>
  </table>
  {#if props.transactions.length === 0}
    <p class="w-full mt-15 mb-15 text-center text-xl font-bold">
      {$i18n.t('common:transactionTable.noPreviousTransactions')}
    </p>
  {/if}
</div>
