"use client"

import { useIntl } from "react-intl"

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

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

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

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

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

  return (
    <Button
      variant="icon"
      intent="text"
      className={styles.button}
      onPress={handleAddToCalendar}
      disabled={disabled}
    >
      {intl.formatMessage({
        defaultMessage: "Add to calendar",
      })}
      <MaterialIcon icon="calendar_add_on" color="CurrentColor" />
    </Button>
  )
}