"use client"

import * as React from "react"

import { FooterView } from "./components/footer-view"
import { useLanguagePicker } from "./hooks/use-language-picker"
import { useMotion } from "./hooks/use-motion"
import { useReveal } from "./hooks/use-reveal"
import { resolveContent } from "./lib/resolve-content"
import type { VibeTogetherFooterProps } from "./types"

export function VibeTogetherFooter({
  className,
  onLanguageChange,
  ...contentProps
}: VibeTogetherFooterProps) {
  const content = resolveContent(contentProps)
  const rootRef = React.useRef<HTMLElement>(null)
  const animate = useMotion()
  const revealed = useReveal(rootRef, animate)
  const picker = useLanguagePicker({
    defaultLanguage: content.defaultLanguage,
    onChange: onLanguageChange,
  })

  return (
    <FooterView
      content={content}
      className={className}
      animate={animate}
      revealed={revealed}
      picker={picker}
      rootRef={rootRef}
    />
  )
}