import { Link, useLocation, useNavigate } from 'react-router-dom'
import orderFailedImg from '../../assets/order-failed.png'
import styles from './CheckoutSteps.module.css'

export function CheckoutFailedStep() {
  const navigate = useNavigate()
  const location = useLocation()
  const message =
    (location.state as { message?: string } | null)?.message ||
    'ثبت سفارش ممکن نشد. لطفاً دوباره تلاش کنید.'

  return (
    <div className={`${styles.stepContent} ${styles.successContent}`}>
      <div className={styles.successIcon}>
        <img
          src={orderFailedImg}
          alt="ثبت سفارش ناموفق"
          className={styles.successImage}
        />
      </div>

      <div className={styles.successHeader}>
        <h1 className={styles.stepTitle}>سفارش ثبت نشد</h1>
        <p className={styles.stepDesc}>{message}</p>
      </div>

      <div className={styles.successActions}>
        <button
          type="button"
          className={styles.successPrimaryBtn}
          onClick={() => navigate('/checkout/payment')}
        >
          تلاش مجدد
        </button>
        <Link to="/checkout/cart" className={styles.successNeutralBtn}>
          بازگشت به سبد خرید
        </Link>
      </div>
    </div>
  )
}
