import React from 'react';

interface ReceiptPreviewProps {
    receiptPath: string | null;
    onClose: () => void;
}

export default function ReceiptPreview({ receiptPath, onClose }: ReceiptPreviewProps) {
    if (!receiptPath) return null;

    return (
        <div
            className="fixed inset-0 bg-black/60 z-[70] flex items-center justify-center p-4 pb-20 sm:pb-4"
            onClick={onClose}
        >
            <div className="relative max-w-lg max-h-[80vh]" onClick={e => e.stopPropagation()}>
                <img
                    src={`/storage/${receiptPath}`}
                    alt="Receipt"
                    className="max-w-full max-h-[80vh] rounded-2xl shadow-2xl object-contain"
                />
                <button
                    onClick={onClose}
                    className="absolute -top-3 -right-3 w-8 h-8 bg-white dark:bg-gray-800 rounded-full shadow-lg flex items-center justify-center text-gray-600 dark:text-gray-300 hover:text-gray-900 text-lg"
                >
                    ✕
                </button>
            </div>
        </div>
    );
}
