"use client"

import { useRef } from "react"

import { StickyElementNameEnum } from "@/stores/sticky-position"

import Alert from "@/components/TempDesignSystem/Alert"
import useStickyPosition from "@/hooks/useStickyPosition"

import { SitewideAlertProps } from "./sitewideAlert"

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

import { AlertTypeEnum } from "@/types/enums/alert"

export default function SiteWideAlertClient({ alert }: SitewideAlertProps) {
  const alertRef = useRef(null)
  useStickyPosition({
    ref: alertRef,
    name: StickyElementNameEnum.SITEWIDE_ALERT,
  })
  const isAlarm = alert.type === AlertTypeEnum.Alarm

  return (
    <div
      ref={isAlarm ? alertRef : null}
      className={`${styles.sitewideAlert} ${isAlarm ? styles.alarm : ""}`}
    >
      <Alert
        variant="banner"
        type={alert.type}
        link={alert.link}
        phoneContact={alert.phoneContact}
        sidepeekCtaText={alert.sidepeekButton?.cta_text}
        sidepeekContent={alert.sidepeekContent}
        heading={alert.heading}
        text={alert.text}
      />
    </div>
  )
}