import { KeyboardArrowDown } from '@mui/icons-material'
import { CircularProgress } from '@mui/material'
import { StyledDropDownButton, StyledIconButton } from './styles'

export default function AnchorElement({
  button,
  icon,
  handleClick,
  loading,
  anchor,
}) {
  if (anchor) return <>{anchor({ open: handleClick })}</>

  if (button)
    return (
      <StyledDropDownButton
        onClick={handleClick}
        variant="outlined"
        disabled={loading}
        endIcon={
          loading ? (
            <CircularProgress size="20px" thickness={1.7} />
          ) : (
            <KeyboardArrowDown />
          )
        }
        {...button?.buttonProps}
      >
        {button?.label}
      </StyledDropDownButton>
    )

  if (!button && !anchor) {
    return (
      <StyledIconButton
        outlined={icon?.outlined ?? false}
        onClick={handleClick}
        {...icon.iconProps}
      >
        {icon.icon}
      </StyledIconButton>
    )
  }
}
