import type { FunctionalComponent } from 'preact';

import { ActionRow } from '../../core';
import { Button } from '../../core/Button';

type ElementEditorActionsProps = {
  t: (key: string, fallback?: string) => string;
  isEdit?: boolean;
  onCancel: () => void;
  disabled?: boolean;
};

export const ElementEditorActions: FunctionalComponent<ElementEditorActionsProps> = ({ t, isEdit, onCancel, disabled }) => (
  <ActionRow className="ask-pt-1">
    <Button variant="secondary" type="button" onClick={onCancel}>
      {t('common.cancel', 'Cancel')}
    </Button>
    <Button variant="primary" type="submit" disabled={disabled}>
      {isEdit ? t('common.save', 'Save') : t('common.submit', 'Submit')}
    </Button>
  </ActionRow>
);
