import { A } from "@solidjs/router";
import type { Accessor } from "solid-js";
import type { Dictionary } from "@ben-to/i18n/dictionary";

export function CookieConsentBanner(props: {
  readonly t: Accessor<Dictionary>;
  readonly onAccept: () => void;
  readonly onReject: () => void;
}) {
  return (
    <div class="cookie-consent" role="region" aria-labelledby="cookie-consent-heading">
      <div class="cookie-consent__inner">
        <h2 id="cookie-consent-heading" class="cookie-consent__title">
          {props.t().cookieConsentTitle}
        </h2>
        <p class="cookie-consent__text">{props.t().cookieConsentDescription}</p>
        <p class="cookie-consent__privacy">
          <A href="/confidentialite" class="cookie-consent__link">
            {props.t().navPrivacy}
          </A>
        </p>
        <div class="cookie-consent__actions">
          <button
            type="button"
            class="cookie-consent__btn cookie-consent__btn--primary"
            onClick={() => props.onAccept()}
          >
            {props.t().cookieConsentAccept}
          </button>
          <button
            type="button"
            class="cookie-consent__btn cookie-consent__btn--ghost"
            onClick={() => props.onReject()}
          >
            {props.t().cookieConsentReject}
          </button>
        </div>
      </div>
    </div>
  );
}
