"use client"
import { useIntl } from "react-intl"

import { myBooking } from "@/constants/myBooking"
import { env } from "@/env/client"

import { EditIcon } from "@/components/Icons"
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({
  confirmationNumber,
  lastName,
}: ManageBookingProps) {
  const intl = useIntl()
  const lang = useLang()
  const myBookingUrl = myBooking[env.NEXT_PUBLIC_NODE_ENV][lang]
  return (
    <Button
      asChild
      intent="text"
      size="small"
      theme="base"
      variant="icon"
      wrapping
    >
      <Link
        color="none"
        href={`${myBookingUrl}?bookingId=${confirmationNumber}&lastName=${lastName}`}
        weight="bold"
      >
        <EditIcon />
        {intl.formatMessage({ id: "Manage booking" })}
      </Link>
    </Button>
  )
}