import { useTranslation } from "react-i18next";
import "./settings-pages.scss";

/**
 * Third-party attribution — routed at `/parametres/credits`. Exists solely
 * to satisfy the CC BY 4.0 requirement on the ingredient icon set (see
 * `features/recipes/ingredients/ingredient-icons.tsx`'s `FilledIcon`-based components):
 * most of it comes from foodiconpack.com's free "Common ingredient icons"
 * and "Common Utensils" collections, which require crediting the source,
 * linking the license, and noting that the icons were adapted (recolored
 * to `currentColor` for theming, original size/style attributes dropped —
 * see the generation note in `ingredient-icons.tsx`). Nothing else in the
 * app currently needs a credits entry — grow this page if that changes.
 */
export function CreditsPage() {
  const { t } = useTranslation();

  return (
    <div className="settings-page">
      <h1>{t("credits.title")}</h1>

      <div className="settings-page__section">
        <h2 className="settings-page__section-title">{t("credits.icons.title")}</h2>
        <p className="settings-page__hint">{t("credits.icons.description")}</p>
        <p className="settings-page__hint">
          <a href="https://foodiconpack.com" target="_blank" rel="noreferrer">
            foodiconpack.com
          </a>
          {" — "}
          <a href="https://creativecommons.org/licenses/by/4.0/" target="_blank" rel="noreferrer">
            {t("credits.icons.licenseLabel")}
          </a>
        </p>
      </div>
    </div>
  );
}