"use client"

import { useIntl } from "react-intl"

import { profileConsent } from "@scandic-hotels/common/constants/routes/myPages"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { TextLink } from "@scandic-hotels/design-system/TextLink"
import { Typography } from "@scandic-hotels/design-system/Typography"

import useLang from "@/hooks/useLang"
import { trackLinkClick } from "@/utils/tracking/profilingConsent"

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

export default function PersonalizationSlot() {
  const intl = useIntl()
  const lang = useLang()

  return (
    <section className={styles.container}>
      <div className={styles.content}>
        <Typography variant="Title/Subtitle/md">
          <h3>
            {intl.formatMessage({
              id: "profile.personalization&profiling",
              defaultMessage: "Personalization & Profiling",
            })}
          </h3>
        </Typography>
        <Typography variant="Body/Paragraph/mdRegular">
          <p>
            {intl.formatMessage({
              id: "profile.reviewUpdateConsent",
              defaultMessage:
                "Review and update your consent settings to control how we personalize your experience.",
            })}
          </p>
        </Typography>
      </div>
      <TextLink
        href={profileConsent[lang]}
        color="Text/Interactive/Secondary"
        typography="Link/md"
        onClick={() =>
          trackLinkClick({
            position: "profile",
            name: "manage profiling consent",
          })
        }
      >
        <MaterialIcon size={24} icon="arrow_forward" color="CurrentColor" />
        {intl.formatMessage({
          id: "profile.mangeProfilingConsent",
          defaultMessage: "Manage profiling consent",
        })}
      </TextLink>
    </section>
  )
}