import { cx } from "class-variance-authority"
import { Button as ButtonRAC } from "react-aria-components"

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

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

import type { ComponentProps } from "react"

interface MainMenuButtonProps extends ComponentProps<typeof ButtonRAC> {
  isLoading?: boolean
}

export default function MainMenuButton({
  className,
  isLoading,
  ...props
}: MainMenuButtonProps) {
  return (
    <Typography variant="Body/Paragraph/mdBold">
      <ButtonRAC
        type="button"
        className={cx(styles.menuButton, className, {
          [styles.loading]: isLoading,
        })}
        {...props}
      />
    </Typography>
  )
}