"use client"

import * as React from "react"

import { FooterView } from "./components/footer-view"
import { useBadgeSpin } from "./hooks/use-badge-spin"
import { useEntrance } from "./hooks/use-entrance"
import { useMediaQuery } from "./hooks/use-media-query"
import { useNotchClip } from "./hooks/use-notch-clip"
import { MOBILE_QUERY, REDUCED_MOTION_QUERY } from "./lib/constants"
import { resolveContent } from "./lib/resolve-content"
import type { NotchRoasteryFooterProps } from "./types"

export function NotchRoasteryFooter({
  className,
  onSubscribe,
  ...contentProps
}: NotchRoasteryFooterProps) {
  const content = resolveContent(contentProps)
  const footerRef = React.useRef<HTMLElement>(null)
  const panelRef = React.useRef<HTMLDivElement>(null)
  const badgeRef = React.useRef<HTMLDivElement>(null)

  const mobile = useMediaQuery(MOBILE_QUERY)
  const reduceMotion = useMediaQuery(REDUCED_MOTION_QUERY)

  useNotchClip(footerRef, panelRef)
  useEntrance(footerRef, panelRef, reduceMotion)
  useBadgeSpin(badgeRef, reduceMotion)

  return (
    <FooterView
      content={content}
      className={className}
      mobile={mobile}
      onSubscribe={onSubscribe}
      footerRef={footerRef}
      panelRef={panelRef}
      badgeRef={badgeRef}
    />
  )
}