import { Link } from 'react-router-dom'
import { getWebsiteUrl } from '../../services/websiteService'
import styles from './CheckoutActionBar.module.css'

interface CheckoutActionBarProps {
  primaryLabel: string
  onPrimary: () => void
  primaryDisabled?: boolean
  primaryType?: 'button' | 'submit'
}

export function CheckoutActionBar({
  primaryLabel,
  onPrimary,
  primaryDisabled = false,
  primaryType = 'button',
}: CheckoutActionBarProps) {
  const websiteUrl = getWebsiteUrl()

  return (
    <div className={styles.bar}>
      <a href={websiteUrl} className={styles.websiteBtn}>
        بازگشت به وبسایت و ادامهٔ خرید
      </a>
      <button
        type={primaryType}
        className={styles.primaryBtn}
        disabled={primaryDisabled}
        onClick={primaryType === 'button' ? onPrimary : undefined}
      >
        {primaryLabel}
      </button>
    </div>
  )
}

/** Link variant for success / navigation-only rows. */
export function CheckoutWebsiteLink() {
  const websiteUrl = getWebsiteUrl()

  return (
    <div className={styles.bar}>
      <a href={websiteUrl} className={styles.websiteBtn}>
        بازگشت به وبسایت و ادامهٔ خرید
      </a>
    </div>
  )
}

/** For Link-based primary actions (success page). */
export function CheckoutActionBarLinks({
  primaryTo,
  primaryLabel,
  onPrimaryClick,
}: {
  primaryTo: string
  primaryLabel: string
  onPrimaryClick?: () => void
}) {
  const websiteUrl = getWebsiteUrl()

  return (
    <div className={styles.bar}>
      <a href={websiteUrl} className={styles.websiteBtn}>
        بازگشت به وبسایت و ادامهٔ خرید
      </a>
      <Link to={primaryTo} className={styles.primaryBtn} onClick={onPrimaryClick}>
        {primaryLabel}
      </Link>
    </div>
  )
}
