"use client"

import { LegalBar } from "./components/legal-bar"
import { LinkGroups } from "./components/link-groups"
import { Newsletter } from "./components/newsletter"
import { SocialBar } from "./components/social-bar"
import { Wordmark } from "./components/wordmark"
import {
  DEFAULT_FOLLOW_LINKS,
  DEFAULT_GROUPS,
  DEFAULT_LEGAL_LINKS,
  DEFAULT_SOCIAL_LINKS,
} from "./data/defaults"
import { useMediaQuery } from "./hooks/use-media-query"
import { classNames } from "./lib/class-names"
import { MOBILE_QUERY } from "./lib/constants"
import { footerStyles } from "./styles"
import type { HeliorOrbitalFooterProps } from "./types"

export function HeliorOrbitalFooter({
  className,
  headline = "Launch notes, once a month.",
  emailLabel = "Email address",
  emailPlaceholder = "Email address",
  subscribeLabel = "Subscribe →",
  joinLabel = "Join →",
  onSubscribe,
  groups = DEFAULT_GROUPS,
  followLabel = "Follow",
  followLinks = DEFAULT_FOLLOW_LINKS,
  socialLinks = DEFAULT_SOCIAL_LINKS,
  companyName = "© 2026 Helior Orbital Inc.",
  shortCompanyName = "© 2026 Helior",
  legalLinks = DEFAULT_LEGAL_LINKS,
  topLabel = "Top ↑",
  backToTopLabel = "Back to top ↑",
  wordmark = "HELIOR",
}: HeliorOrbitalFooterProps) {
  const isMobile = useMediaQuery(MOBILE_QUERY)

  return (
    <footer className={classNames("hl-footer", className)}>
      <style>{footerStyles}</style>
      <Newsletter
        headline={headline}
        emailLabel={emailLabel}
        emailPlaceholder={emailPlaceholder}
        subscribeLabel={subscribeLabel}
        joinLabel={joinLabel}
        onSubscribe={onSubscribe}
      />
      <LinkGroups
        groups={groups}
        followLabel={followLabel}
        followLinks={followLinks}
        isMobile={isMobile}
      />
      <SocialBar links={socialLinks} topLabel={topLabel} />
      <LegalBar
        companyName={companyName}
        shortCompanyName={shortCompanyName}
        links={legalLinks}
        backToTopLabel={backToTopLabel}
      />
      <Wordmark text={wordmark} />
    </footer>
  )
}