import * as React from 'react';

import { Icon } from '../Icon';
import { i18n } from '../../utils/i18n';
import { useUsercentrics } from '../../contexts/UsercentricsContext';
import { cx } from '../../utils/cx';

export interface AcceptAndCloseCTAProps {
  onClick: VoidFunction;
}

export const AcceptAndCloseCTA = ({ onClick }: AcceptAndCloseCTAProps): JSX.Element => {
  const { locale } = useUsercentrics();
  const text = i18n('acceptAndClose', locale);

  return (
    <div className={cx('uc-w-full uc-flex uc-justify-end uc-mb-5 uc-pr-2.5')}>
      <button onClick={onClick} className="uc-button uc-p-0 uc-flex uc-items-center">
        <span className="uc-mr-2.5 uc-text-12 uc-font-normal uc-font-primary uc-text-kilamanjaro">{text}</span>
        <Icon name="close" size="sm" />
      </button>
    </div>
  );
};