import { h, type FunctionComponent } from 'preact'
import { useEffect, useState } from 'preact/hooks'
import rek from 'rek'

import type { Transaction } from '../../../shared/types.db.ts'

interface InvoiceProps {
  year: number
}

const Invoice: FunctionComponent<InvoiceProps> = ({ year }) => {
  const [invoices, setInvoices] = useState<Transaction[]>([])

  useEffect(() => {
    rek(`/api/invoices/by-year/${year}`).then(setInvoices)
  }, [year])

  return (
    <table>
      <tbody>
        {invoices.map((invoice) => (
          <tr>
            <td>{invoice.accountNumber}</td>
            <td>{invoice.description}</td>
            <td>{invoice.amount}</td>
          </tr>
        ))}
      </tbody>
    </table>
  )
}

export default Invoice