"use client"

import { usePathname } from "next/navigation"
import { PropsWithChildren, useEffect } from "react"

import { login } from "@/constants/routes/handleAuth"

import Link from "@/components/TempDesignSystem/Link"
import { LinkProps } from "@/components/TempDesignSystem/Link/link"
import { trackLoginClick } from "@/utils/tracking"

import { TrackingPosition } from "@/types/components/tracking"
import { LangParams } from "@/types/params"

export default function LoginButton({
  className,
  position,
  trackingId,
  lang,
  children,
  color = "black",
}: PropsWithChildren<
  LangParams & {
    className: string
    trackingId: string
    position: TrackingPosition
    color?: LinkProps["color"]
  }
>) {
  const pathName = usePathname()

  useEffect(() => {
    document
      .getElementById(trackingId)
      ?.addEventListener("click", () => trackLoginClick(position))
    return () => {
      document
        .getElementById(trackingId)
        ?.removeEventListener("click", () => trackLoginClick(position))
    }
  }, [position, trackingId])

  return (
    <Link
      className={className}
      id={trackingId}
      color={color}
      href={`${login[lang]}?redirectTo=${encodeURIComponent(`/${lang}${pathName}`)}`}
    >
      {children}
    </Link>
  )
}
