"use client"

import { useIntl } from "react-intl"

import { CalendarAddIcon } from "@/components/Icons"
import Button from "@/components/TempDesignSystem/Button"
import { trackMyStayPageLink } from "@/utils/tracking"

import styles from "../actionPanel.module.css"

export default function AddToCalendarButton({
  onPress,
}: {
  onPress: () => void
}) {
  const intl = useIntl()

  const handleAddToCalendar = () => {
    trackMyStayPageLink("add to calendar")
    onPress()
  }

  return (
    <Button
      variant="icon"
      intent="text"
      theme="base"
      className={styles.button}
      onPress={handleAddToCalendar}
    >
      {intl.formatMessage({ id: "Add to calendar" })}
      <CalendarAddIcon width={24} height={24} color="burgundy" />
    </Button>
  )
}
