"use client"

import { BottomBar } from "./components/bottom-bar"
import { LegalNav } from "./components/legal-nav"
import { NewsletterSignup } from "./components/newsletter-signup"
import { SocialNav } from "./components/social-nav"
import { Wordmark } from "./components/wordmark"
import {
  DEFAULT_LEGAL_LINKS,
  DEFAULT_LETTERS,
  DEFAULT_SOCIAL_LINKS,
} from "./data/defaults"
import { classNames } from "./lib/class-names"
import { footerStyles } from "./styles"
import type { ScrambleLinksFooterProps } from "./types"

export function ScrambleLinksFooter({
  className,
  signupLabel = "Sign up for new collections, stories & early access",
  emailLabel = "Email address",
  emailPlaceholder = "Email address",
  invalidPlaceholder = "Enter a valid email",
  subscribeLabel = "Subscribe",
  successMessage = "Thanks. You’re on the list",
  dismissLabel = "Dismiss",
  onSubscribe,
  socialLinks = DEFAULT_SOCIAL_LINKS,
  legalLinks = DEFAULT_LEGAL_LINKS,
  copyYears = "© 2020–2026",
  companyName = "Jolocky Studio Ltd.",
  shortCopyright = "© 2026 Jolocky",
  rights = "All rights reserved",
  wordmarkLabel = "Jolocky",
  letters = DEFAULT_LETTERS,
}: ScrambleLinksFooterProps) {
  return (
    <div className={classNames("sl-footer-wrap", className)}>
      <style>{footerStyles}</style>
      <footer className="sl-footer">
        <div className="sl-top">
          <NewsletterSignup
            label={signupLabel}
            emailLabel={emailLabel}
            emailPlaceholder={emailPlaceholder}
            invalidPlaceholder={invalidPlaceholder}
            subscribeLabel={subscribeLabel}
            successMessage={successMessage}
            dismissLabel={dismissLabel}
            onSubscribe={onSubscribe}
          />
          <SocialNav links={socialLinks} />
          <p className="sl-copy">
            {copyYears}
            <br />
            {companyName}
          </p>
          <LegalNav links={legalLinks} />
        </div>

        <Wordmark label={wordmarkLabel} letters={letters} />

        <BottomBar
          longCopyright={`${copyYears} ${companyName}`}
          shortCopyright={shortCopyright}
          rights={rights}
          legalLinks={legalLinks}
        />
      </footer>
    </div>
  )
}