import { Typography } from "@scandic-hotels/design-system/Typography"

import { getProfile, getProfilingConsent } from "@/lib/trpc/memoizedRequests"

import { GetMainIconByCSIdentifier, userHasConsent } from "../utils"
import { BannerButton } from "./Button"

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

export async function ProfilingConsentBanner() {
  const user = await getProfile()
  if (!user || userHasConsent(user?.profilingConsent)) return null

  const data = await getProfilingConsent()
  if (!data) return null

  const { icon, banner } = data.profiling_consent

  return (
    <div className={styles.banner}>
      <GetMainIconByCSIdentifier identifier={icon} className={styles.icon} />
      <span className={styles.text}>
        <Typography variant="Title/sm" className={styles.header}>
          <h4>{banner.header}</h4>
        </Typography>
        <Typography variant="Body/Lead text">
          <p>{banner.sub_header}</p>
        </Typography>
      </span>
      <BannerButton cta={banner.button_text} />
    </div>
  )
}