import { FC } from 'react';

import { IconCheck, IconX } from '@material-hu/icons/tabler';
import Stack from '@material-hu/mui/Stack';

import Button from '@material-hu/components/design-system/Buttons/Button';
import { useLokaliseTranslation as useTranslation } from 'src/utils/i18n';

type Props = {
  postApprovalControls: {
    handleApprove: () => void;
    handleReject: () => void;
  };
};

export const PostCardApprovalControls: FC<Props> = props => {
  const { postApprovalControls } = props;
  const { t } = useTranslation(['group']);

  return (
    <>
      <Stack sx={{ p: 2, pb: 0, gap: 2, flexDirection: 'row' }}>
        <Button
          variant="secondary"
          onClick={postApprovalControls.handleReject}
          sx={{ flexGrow: 1, gap: 1 }}
        >
          <IconX size={16} />
          {t(`group:reject`)}
        </Button>
        <Button
          variant="primary"
          onClick={postApprovalControls.handleApprove}
          sx={{ flexGrow: 1, gap: 1 }}
        >
          <IconCheck size={16} />
          {t(`group:approve`)}
        </Button>
      </Stack>
    </>
  );
};