"use client"

import { Button as ButtonRAC } from "react-aria-components"
import { useIntl } from "react-intl"

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

import { trackMyStayPageLink } from "@/utils/tracking"

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

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

  function handleAddToCalendar() {
    trackMyStayPageLink("add to calendar")
    onPress()
  }

  return (
    <ButtonRAC
      className={styles.button}
      isDisabled={disabled}
      onPress={handleAddToCalendar}
    >
      <MaterialIcon color="Icon/Interactive/Default" icon="calendar_add_on" />
      <Typography variant="Body/Paragraph/mdBold">
        <span className={styles.text}>
          {intl.formatMessage({
            defaultMessage: "Add to calendar",
          })}
        </span>
      </Typography>
    </ButtonRAC>
  )
}
