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

type IHeaderToggleButtonProps = Omit<ToggleButtonProps, 'color' | 'size'>;

const HeaderToggleButton = forwardRef(function HeaderToggleButton(
  props: IHeaderToggleButtonProps,
  ref: ForwardedRef<HTMLButtonElement>
) {
  const sx = useSx(
    props,
    {
      color: 'text.primary',
      borderStyle: 'none',
      padding: 1,
      fontSize: '1.5rem',
      width: 36,
      height: 36
    },
    { defaults: true }
  );
  return <ToggleButton ref={ref} {...props} color="secondary" sx={sx} />;
});

export { HeaderToggleButton };