import { IconButton } from '@/components/@extended';
import { useSx } from '@/hooks';
import { ButtonProps, IconButtonProps } from '@mui/material';
import { ForwardedRef, forwardRef } from 'react';

type IHeaderIconButtonProps = Omit<IconButtonProps & ButtonProps, 'color' | 'variant' | 'size'>;

const HeaderIconButton = forwardRef(function HeaderIconButton(
  props: IHeaderIconButtonProps,
  ref: ForwardedRef<HTMLButtonElement> | null
) {
  const sx = useSx(
    props,
    {
      color: 'text.primary'
    },
    { defaults: true }
  );
  return (
    // @ts-ignore
    <IconButton ref={ref} {...props} color="secondary" variant="text" sx={sx} />
  );
});

export { HeaderIconButton };