import { useSx } from '@/hooks';
import { Button, ButtonProps } from '@mui/material';
import { ForwardedRef, forwardRef } from 'react';

type IHeaderButtonProps = Omit<ButtonProps, 'color' | 'variant' | 'size'>;

const HeaderButton = forwardRef(function HeaderButton(
  props: IHeaderButtonProps,
  ref: ForwardedRef<HTMLButtonElement> | null
) {
  const sx = useSx(props, { color: 'text.primary' }, { defaults: true });

  return <Button ref={ref} {...props} color="secondary" variant="text" sx={sx} />;
});

export { HeaderButton };
export type { IHeaderButtonProps };