"use client"

import Link from "next/link"
import { useParams } from "next/navigation"
import { useEffect, useState } from "react"
import { useIntl } from "react-intl"

import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"

import Button from "@/components/TempDesignSystem/Button"

interface MapButtonProps {
  className?: string
}

export default function MapButton({ className = "" }: MapButtonProps) {
  const intl = useIntl()
  const params = useParams()
  const [mapUrl, setMapUrl] = useState<string | null>(null)

  useEffect(() => {
    const url = new URL(window.location.href)
    url.searchParams.set("view", "map")
    setMapUrl(url.toString())
  }, [params])

  if (!mapUrl) {
    return null
  }

  return (
    <Button
      intent="inverted"
      variant="icon"
      size="small"
      theme="base"
      className={className}
      asChild
    >
      <Link href={mapUrl} scroll={true}>
        <MaterialIcon icon="map" color="CurrentColor" />
        {intl.formatMessage({
          defaultMessage: "See on map",
        })}
      </Link>
    </Button>
  )
}
