import { FONT_CATALOG, fontStack } from '@dorfteich/shared';
import { useTranslation } from 'react-i18next';

import { useDocumentTitle } from '../lib/use-document-title';
/**
 * Font catalog attribution page (issue #66, ADR 0016): lists every self-hosted
 * family with its license, rendered in the font itself. The self-hosting is the
 * GDPR guarantee — this page is the human-readable attribution surface.
 */
export function FontCatalogPage(): React.JSX.Element {
  const { t } = useTranslation('font');
  useDocumentTitle(t('catalog.title'));
  return (
    <div className="font-catalog">
      <h1>{t('catalog.title')}</h1>
      <p>{t('catalog.intro')}</p>
      <table className="font-catalog__table">
        <thead>
          <tr>
            <th>{t('catalog.family')}</th>
            <th>{t('catalog.category')}</th>
            <th>{t('catalog.weights')}</th>
            <th>{t('catalog.license')}</th>
          </tr>
        </thead>
        <tbody>
          {FONT_CATALOG.map((font) => (
            <tr key={font.family}>
              <td style={{ fontFamily: fontStack(font.family) }}>{font.family}</td>
              <td>{t(`category.${font.category}`)}</td>
              <td>{font.weights.join(', ')}</td>
              <td>
                <a href={font.licenseUrl} target="_blank" rel="noreferrer noopener">
                  {font.license}
                </a>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}