import { FC } from 'react';

import ArchiveIcon from '@material-hu/icons/material/Archive';
import Divider from '@material-hu/mui/Divider';
import ListItemButton from '@material-hu/mui/ListItemButton';
import Typography from '@material-hu/mui/Typography';

import { useTranslation } from 'src/components/dashboard/chat/i18n';

export type ArchiveChatButtonProps = {
  onClick: (boolean) => void;
  archivedCount: number;
};

const ArchiveChatButton: FC<ArchiveChatButtonProps> = ({
  onClick,
  archivedCount,
}) => {
  const { t } = useTranslation();
  const showArchiveChat = () => onClick(true);

  return (
    <>
      <ListItemButton
        onClick={showArchiveChat}
        sx={{
          px: 3,
          py: 1.5,
          display: 'grid',
          gridTemplateColumns: '30px 85% 20px',
        }}
      >
        <ArchiveIcon
          color="secondary"
          fontSize="small"
        />
        <Typography
          color="textPrimary"
          variant="body2"
          sx={{
            fontWeight: 700,
          }}
        >
          {t('ARCHIVED')}
        </Typography>
        <Typography
          color="textPrimary"
          variant="body2"
          sx={{
            alignSelf: 'end',
          }}
        >
          {archivedCount}
        </Typography>
      </ListItemButton>
      <Divider />
    </>
  );
};
export default ArchiveChatButton;