"use client"
import { cx } from "class-variance-authority"
import { useIntl } from "react-intl"

import { useIsMobile } from "@scandic-hotels/booking-flow/hooks/useBreakpoint"
import { Button, type ButtonProps } from "@scandic-hotels/design-system/Button"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"

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

export function UsePointsButton({ variant, onPress }: ButtonProps) {
  const intl = useIntl()
  const isSmallScreen = useIsMobile()

  const buttonVariant =
    variant === "Text" && isSmallScreen ? "Secondary" : variant

  const buttonClassName = cx(
    variant === "Text" ? styles.textButton : styles.primaryButton
  )

  return (
    <Button
      size="Medium"
      className={buttonClassName}
      variant={buttonVariant}
      typography="Body/Paragraph/mdBold"
      onPress={onPress}
    >
      {intl.formatMessage({
        id: "myPages.membershipPointsOverview.usePointsButton",
        defaultMessage: "Use points",
      })}
      <MaterialIcon icon="chevron_right" size={24} color="CurrentColor" />
    </Button>
  )
}