"use client"

import * as React from "react"

import { FooterView } from "./components/footer-view"
import { useCopyFeedback } from "./hooks/use-copy-feedback"
import { useFooterSize } from "./hooks/use-footer-size"
import { useWave } from "./hooks/use-wave"
import { breakpointFromWidth } from "./lib/breakpoint"
import { resolveContent } from "./lib/resolve-content"
import type { BlobMascotFooterProps } from "./types"

export function BlobMascotFooter({
  className,
  ...contentProps
}: BlobMascotFooterProps) {
  const rootRef = React.useRef<HTMLDivElement>(null)
  const wordmarkRef = React.useRef<HTMLDivElement>(null)
  const size = useFooterSize(rootRef, wordmarkRef)
  const feedback = useCopyFeedback()
  const wave = useWave()

  return (
    <FooterView
      content={resolveContent(contentProps)}
      className={className}
      breakpoint={breakpointFromWidth(size.footer)}
      wordmarkWidth={size.wordmark}
      rootRef={rootRef}
      wordmarkRef={wordmarkRef}
      feedback={feedback}
      wave={wave}
    />
  )
}