"use client"
import { Button as ButtonRAC } from "react-aria-components"

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

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

interface ButtonProps extends React.PropsWithChildren {
  icon: MaterialIconProps["icon"]
  isDisabled?: boolean
  onClick?: () => void
}

export default function Button({
  children,
  icon,
  isDisabled = false,
  onClick = () => {},
}: ButtonProps) {
  return (
    <ButtonRAC
      className={styles.button}
      isDisabled={isDisabled}
      onPress={onClick}
    >
      <MaterialIcon color="Icon/Interactive/Default" icon={icon} />
      <Typography variant="Body/Paragraph/mdBold">
        <span className={styles.text}>{children}</span>
      </Typography>
    </ButtonRAC>
  )
}