import { Button as ButtonRAC } from 'react-aria-components'

import { Typography } from '../Typography'
import { ChipButtonProps } from './types'
import { variants } from './variants'

export function ChipButton({
  children,
  variant,
  className,
  ...props
}: ChipButtonProps) {
  const classNames = variants({
    variant,
  })

  return (
    <Typography variant="Body/Supporting text (caption)/smBold">
      <ButtonRAC {...props} className={[className, classNames].join(' ')}>
        {children}
      </ButtonRAC>
    </Typography>
  )
}