'use client';

import * as React from 'react';
import IconButton from '@mui/material/IconButton';
import Tooltip from '@mui/material/Tooltip';
import { EnvelopeSimple as EnvelopeSimpleIcon } from '@phosphor-icons/react/dist/ssr/EnvelopeSimple';
import { useTranslation } from 'react-i18next';

export function MarkAllAsReadButton({
  onMarkAllAsRead,
  disabled,
}: {
  onMarkAllAsRead: (() => void) | undefined;
  disabled: boolean;
}): React.JSX.Element {
  const { t } = useTranslation();

  return (
    <Tooltip title={t('mark-all-as-read')}>
      <IconButton
        edge="end"
        onClick={onMarkAllAsRead}
        disabled={disabled}
      >
        <EnvelopeSimpleIcon color={disabled ? 'lightgray' : 'black'} />
      </IconButton>
    </Tooltip>
  );
}