"use client"

import * as React from "react"

import { FooterView } from "./components/footer-view"
import { useAltimeter } from "./hooks/use-altimeter"
import { useEntrance } from "./hooks/use-entrance"
import { resolveContent } from "./lib/resolve-content"
import type { CruisingAltitudeFooterProps } from "./types"

export function CruisingAltitudeFooter({
  className,
  onSubscribe,
  ...contentProps
}: CruisingAltitudeFooterProps) {
  const content = resolveContent(contentProps)
  const rootRef = React.useRef<HTMLElement>(null)
  const altimeter = useAltimeter(content.maxAltitude)
  useEntrance(rootRef)

  return (
    <FooterView
      content={content}
      className={className}
      altimeter={altimeter}
      onSubscribe={onSubscribe}
      rootRef={rootRef}
    />
  )
}