"use client"

import { useIntl } from "react-intl"

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

import { myStay } from "@/constants/routes/myStay"

import Button from "@/components/TempDesignSystem/Button"
import Link from "@/components/TempDesignSystem/Link"
import useLang from "@/hooks/useLang"

import type { ManageBookingProps } from "@/types/components/hotelReservation/bookingConfirmation/actions/manageBooking"

export default function ManageBooking({ refId }: ManageBookingProps) {
  const intl = useIntl()
  const lang = useLang()

  const bookingUrl = `${myStay[lang]}?RefId=${refId}`

  return (
    <Button
      asChild
      intent="text"
      size="small"
      theme="base"
      variant="icon"
      wrapping
    >
      <Link color="none" href={bookingUrl} weight="bold">
        <MaterialIcon icon="edit_square" color="CurrentColor" />
        {intl.formatMessage({
          defaultMessage: "Manage booking",
        })}
      </Link>
    </Button>
  )
}