import CookieConsent from "react-cookie-consent";
import { CONSENT_COOKIE_NAME } from "./Analytics";

interface CookieBannerProps {
  onAccept?: (acceptedByScrolling: boolean) => void;
  onDecline?: () => void;
}

const CookieBanner = ({ onAccept, onDecline }: CookieBannerProps) => {
  return (
    <CookieConsent
      style={{
        backgroundColor: "white",
        color: "black",
        alignItems: "center",
        flexDirection: "column",
      }}
      contentStyle={{ flex: 1, margin: 0 }}
      overlayStyle={{ backgroundColor: "rgba(0, 0, 0, .65)" }}
      overlay
      cookieName={CONSENT_COOKIE_NAME}
      disableButtonStyles
      declineButtonClasses="bg-gray-800 hover:bg-gray-900 text-white border border-gray-600 w-[136px] md:w-[208px] h-[36px] capitalize text-base font-medium rounded px-4 py-2 transition-colors"
      buttonClasses="bg-blue-600 hover:bg-blue-700 text-white border-blue-600 w-[136px] md:w-[208px] h-[36px] capitalize text-base font-medium rounded px-4 py-2 transition-colors"
      buttonText="Accept"
      declineButtonText="Decline"
      enableDeclineButton={true}
      onAccept={onAccept}
      onDecline={onDecline}
      containerClasses="text-base font-medium p-10 md:p-14 pb-14 text-center" // overriding the default so that the popup isn't hidden by adblockers: https://github.com/Mastermindzh/react-cookie-consent/issues/64
      contentClasses="max-w-[565px]"
      buttonWrapperClasses="mt-7 mb-2 flex gap-5"
    >
      {" "}
      Allow the use of cookies from Meta on this browser? To find out more about
      the use of cookies, see our{" "}
      <a href="https://www.facebook.com/privacy/policy" target="_blank" rel="noopener noreferrer">
        <b>Privacy Policy</b>
      </a>{" "}
      and{" "}
      <a
        href="https://www.facebook.com/privacy/policies/cookies"
        target="_blank"
        rel="noopener noreferrer"
      >
        <b>Cookies Policy</b>
      </a>
      .
    </CookieConsent>
  );
};

export default CookieBanner;