import React from 'react'
import { t } from '$themelocalization'
import { ButtonAria } from '$core-components'

const DraftItemActions = ({ item, showSaveAction, onContinue, onSave, onDelete }) => {
  return (
    <div className="draft-item-actions">
      <ButtonAria
        className="button button-primary draft-continue-button"
        text={t('Drafts.Button.Continue')}
        onClick={onContinue}
        disabled={!item.isProductAvailable}
      />

      <div className="draft-item-secondary-actions">
        {showSaveAction && (
          <>
            <ButtonAria
              className="button button-transparent draft-save-button"
              onClick={onSave}
              disabled={item.saving}
              isLoading={item.saving}
            >
              <span>{t('Drafts.Button.Save')}</span>
            </ButtonAria>
            <span className="action-separator">|</span>
          </>
        )}
        <ButtonAria
          className="button button-transparent draft-delete-button"
          onClick={onDelete}
          disabled={item.deleting}
        >
          <span>{t('Drafts.Button.Delete')}</span>
        </ButtonAria>
      </div>
    </div>
  )
}

export default DraftItemActions
