import { CashIcon, SuccessIcon, VisaIcon, WalletIcon } from '@/assets/svgs/Icons'
import { FailedIcon } from '@/assets/svgs/TraderIcons'
import { useTranslations } from 'next-intl'
import React from 'react'

interface Props { 
withStatus?:boolean;
order?:any;
}

const PaymentInfo = ({order,withStatus}:Props) => {
  const t = useTranslations();
  return (
    <div className="app-card-wrapper font-semibold">
        <h3 className="mb-6">{t("Text.payment_info")}</h3>
        <div className="flex items-center justify-between">
            {order?.payment_method == "cash" ? (
                  <div className="flex items-center gap-2  font-bold ">
                      <CashIcon/>
                      {t("Text.cash")}
                  </div>
              ):order?.payment_method == "wallet" ? (
                <div className="flex items-center gap-2  font-bold ">
                    <WalletIcon/>
                    {t("status.wallet")}
                </div>
              ):(
                <div className="flex items-center gap-2  font-bold ">
                    <VisaIcon/>
                    {t("status.card")}
                </div>
            )}
          {withStatus && (
            order?.payment_status == "paid"? (
              <span className="flex items-center gap-2 bg-success-500/20 text-xs px-2 py-1.5 text-success-600 font-semibold rounded-lg">
                  <SuccessIcon className="size-5" /> {t("tables.paid")}
              </span>
            ):(
              <span className="flex items-center gap-2 bg-error-100 text-xs px-2 py-1.5 text-error-300 font-semibold rounded-lg">
                  <FailedIcon /> {t("Text.unpaid")}
              </span>
            ) 
          )}
        </div>
      </div>
  )
}

export default PaymentInfo