import Stack, { StackProps } from '@material-hu/mui/Stack';

import Button from '@material-hu/components/design-system/Buttons/Button';

import { useLokaliseTranslation } from 'src/utils/i18n';

export type SignatureActionsProps = StackProps & {
  onDelete?: () => void;
  onChange?: () => void;
  disabled?: boolean;
};

export const SignatureActions = ({
  onDelete = () => null,
  onChange = () => null,
  disabled = false,
  ...stackProps
}: SignatureActionsProps) => {
  const { t } = useLokaliseTranslation('web_only');

  return (
    <Stack
      id="signature-actions-button-group"
      aria-label={t('form_inputs.signature_actions') as string}
      {...stackProps}
      sx={{
        gap: 2,
        flexDirection: 'row',
        ...stackProps.sx,
      }}
    >
      <Button
        id="delete-signature-button"
        variant="tertiary"
        onClick={onDelete}
        disabled={disabled}
      >
        {t('general:delete')}
      </Button>
      <Button
        id="change-signature-button"
        variant="secondary"
        onClick={onChange}
        disabled={disabled}
      >
        {t('form_inputs.change_signature')}
      </Button>
    </Stack>
  );
};

export default SignatureActions;