import { Breadcrumbs } from '../components/Breadcrumbs'
import { PageTitle } from '../components/PageTitle'
import formStyles from '../components/InvoiceForm.module.css'
import pageStyles from '../components/PageContent.module.css'
import { useT } from '../i18n/useT'
import styles from './WebsitePage.module.css'

export function TransactionsPage() {
  const t = useT()

  return (
    <main className={pageStyles.content}>
      <Breadcrumbs
        items={[
          { label: t('nav.home'), href: '/' },
          { label: t('nav.finance'), href: '/finance' },
          { label: t('title.transactions') },
        ]}
      />

      <div className={pageStyles.pageHeader}>
        <div>
          <PageTitle en="TRANSACTIONS">{t('title.transactions')}</PageTitle>
          <p className={pageStyles.pageSubtitle}>{t('transactions.subtitle')}</p>
        </div>
      </div>

      <section className={formStyles.section}>
        <p className={styles.placeholderLead}>{t('transactions.lead')}</p>
        <p className={styles.placeholderNote}>{t('transactions.note')}</p>
      </section>
    </main>
  )
}