import React, { useEffect, useState } from 'react'
import { Icon } from '$core-components'

export const CartSummaryError = ({ message }) => {
  const [liveMessage, setLiveMessage] = useState('')

  useEffect(() => {
    setLiveMessage(message || '')
  }, [message])

  if (!message) return null

  return (
    <div className="cart-summary-payment-info" role="alert">
      <Icon name="info2.svg" width="16px" height="16px" className="info-icon" ariaHidden="true"/>
      {liveMessage}
    </div>
  )
}
