import React from 'react';

import { useUsercentrics } from '../../contexts/UsercentricsContext';

export type Props = {
  visible: boolean;
  onAcceptAll: VoidFunction;
  onSettings: VoidFunction;
};

export const InitialBanner = ({ visible, onAcceptAll, onSettings }: Props): JSX.Element | null => {
  const { settingsLabels } = useUsercentrics();

  if (!visible) {
    return null;
  }

  return (
    <div className="uc-client__banner uc-fixed uc-bottom-4 uc-left-0 uc-w-full uc-bg-kilamanjaro uc-text-white">
      <div className="uc-max-w-[752px] uc-mx-auto uc-p-4 uc-pb-2 sm:uc-pb-4">
        <p className="uc-text-12 uc-font-light uc-mb-4">{settingsLabels?.firstLayer.description.default}</p>
        <div className="sm:uc-flex sm:uc-justify-between sm:uc-flex-row-reverse">
          <div className="uc-mb-2 sm:uc-mb-0 uc-w-full">
            <button className="uc-button uc-button--primary uc-w-full" onClick={onAcceptAll}>
              {settingsLabels?.buttons.acceptAll}
            </button>
          </div>
          <div className="uc-flex uc-justify-center sm:uc-block">
            <button className="uc-button" onClick={onSettings}>
              {settingsLabels?.buttons.showSecondLayer}
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};