import classnames from 'classnames'
import type { FC } from 'react'
import type { ButtonSize, NormalButtonPropsType } from '../normalButton'
import NormalButton from '../normalButton'
import styles from './index.module.scss'

interface ButtonPropsType extends NormalButtonPropsType {
  isActive: boolean
  onClick?: Function
  children?: React.ReactNode
  customClassName?: string
  size?: ButtonSize
}

const FilterButton: FC<ButtonPropsType> = (props) => {
  const { onClick, children, isActive = false, customClassName, size = 'normal', ...normalProps } = props
  const handleClick = () => {
    onClick?.()
  }
  return (
    <NormalButton
      customTextClassName={styles['filterButton--text']}
      {...normalProps}
      customClassName={classnames(customClassName, styles.filterButton, isActive && styles['filterButton--active'])}
      onClick={handleClick}
    >
      {children}
    </NormalButton>
  )
}
export default FilterButton
