import Button from '@/components/Button'
import { PaymentMethodEnum } from '@/pages/paymentMethods/enum/Enum'
import type { FC } from 'react'
import type { Order } from '../types/Types'

interface PaymentVerificationBoxProps {
    order: Order
    isVerifyingPayment: boolean
    onVerifyPayment: () => void
}

const PaymentVerificationBox: FC<PaymentVerificationBoxProps> = ({
    order,
    isVerifyingPayment,
    onVerifyPayment,
}) => {
    const payment = order.payments?.[0]
    const isCreditCard = order.paymentMethod?.method === PaymentMethodEnum.CreditCard
    const hasDescription = Boolean(payment?.description)
    const hasAttachments = Boolean(payment?.attachments && payment.attachments.length > 0)

    return (
        <div className='w-[330px] h-fit bg-white rounded-4xl p-8 mt-6'>
            <div className='font-light'>اطلاعات تایید پرداخت</div>

            <div className='mt-6 space-y-4 text-[13px] font-light'>
                {isCreditCard && hasDescription && (
                    <div>
                        <div className='text-description mb-2'>توضیحات پرداخت</div>
                        <div className='text-gray-700 bg-gray-50 p-3 rounded-lg'>{payment?.description}</div>
                    </div>
                )}

                {isCreditCard && hasAttachments && (
                    <div>
                        <div className='text-description mb-2'>پیوست پرداخت</div>
                        <div className='flex gap-3 flex-wrap'>
                            {payment?.attachments?.map((attachment, index) => (
                                <a
                                    key={index}
                                    href={attachment}
                                    target='_blank'
                                    rel='noopener noreferrer'
                                >
                                    <img
                                        src={attachment}
                                        alt={`پیوست پرداخت ${index + 1}`}
                                        className='w-24 h-24 object-cover rounded-xl border border-border'
                                    />
                                </a>
                            ))}
                        </div>
                    </div>
                )}

                <Button
                    label='تایید پرداخت'
                    onClick={onVerifyPayment}
                    isloading={isVerifyingPayment}
                    className='bg-green-600 hover:bg-green-700 w-full'
                />
            </div>
        </div>
    )
}

export default PaymentVerificationBox