"use client"

import { useIntl } from "react-intl"

import { Button } from "@scandic-hotels/design-system/Button"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"

import styles from "./cookieConsentButton.module.css"

export function CookieConsentButton() {
  const intl = useIntl()

  function handleClick() {
    if (!window?.Cookiebot?.show) {
      return
    }

    window.Cookiebot.show()
  }

  return (
    <Button
      variant="Text"
      size="Medium"
      typography="Body/Paragraph/mdBold"
      wrapping={false}
      onPress={handleClick}
      className={styles.cookieConsentButton}
    >
      {intl.formatMessage({
        id: "cookieConsent.manageCookiesButton",
        defaultMessage: "Manage cookies",
      })}
      <MaterialIcon icon="chevron_right" size={24} color="CurrentColor" />
    </Button>
  )
}