import React from 'react'
import { t } from '$themelocalization'
import { Icon, ButtonAria } from '$core-components'
import './DraftDescription.scss'

const DraftDescription = ({ description, onEdit }) => {
  const hasDescription = !!description && description.trim().length > 0

  return (
    <div className="draft-description-container">
      {hasDescription ? (
        <div className="draft-description-with-text">
          <ButtonAria
            className="draft-description-button has-description"
            onClick={onEdit}
            noTruncate={true}
          >
            <Icon name={"cart_edit.svg"} width="16px" height="16px" className="edit-icon" />
          </ButtonAria>
          <div className="draft-description-text">
            {description}
          </div>
        </div>
      ) : (
        <ButtonAria
          className="draft-description-button no-description"
          onClick={onEdit}
          noTruncate={true}
        >
          <Icon name={"cart_edit.svg"} width="16px" height="16px" className="edit-icon" />
          <span className="draft-description-label">
            {t('Drafts.Item.AddDescription')}
          </span>
        </ButtonAria>
      )}
    </div>
  )
}

export default DraftDescription
