import Skeleton from '@design-system/Skeleton';
import { IconButton } from '@mui/material';

import { type HeaderIconButtonProps } from './types';

const HeaderIconButton = ({
  Icon,
  onClick,
  loading,
}: HeaderIconButtonProps) => {
  if (loading) {
    return (
      <Skeleton
        width={40}
        height={40}
      />
    );
  }
  if (!onClick || !Icon) return null;

  return (
    <IconButton onClick={onClick}>
      <Icon />
    </IconButton>
  );
};

export default HeaderIconButton;
