plebdevs/src/components/content/carousels/templates/ResourceTemplate.js

import React, { useEffect, useState } from "react";
import Image from "next/image";
import { useRouter } from "next/router";
import useResponsiveImageDimensions from "@/hooks/useResponsiveImageDimensions";
import { formatTimestampToHowLongAgo } from "@/utils/time";
import { useImageProxy } from "@/hooks/useImageProxy";
import { useNostr } from "@/hooks/useNostr";
import { getSatAmountFromInvoice } from "@/utils/lightning";

const ResourceTemplate = (resource) => {
    const [zaps, setZaps] = useState([]);
    const [zapAmount, setZapAmount] = useState(null);
    const router = useRouter();
    const { returnImageProxy } = useImageProxy();
    const { width, height } = useResponsiveImageDimensions();

    const { fetchZapsForEvent } = useNostr();

    useEffect(() => {
        const fetchZaps = async () => {
            try {
                const zaps = await fetchZapsForEvent(resource.id);
                setZaps(zaps);
            } catch (error) {
                console.error('Error fetching zaps:', error);
            }
        };
        fetchZaps();
    }, [fetchZapsForEvent, resource]);

    useEffect(() => {
        if (zaps.length > 0) {
            zaps.map((zap) => {
                const bolt11Tag = zap.tags.find(tag => tag[0] === 'bolt11');
                const invoice = bolt11Tag ? bolt11Tag[1] : null;

                if (invoice) {
                    const amount = getSatAmountFromInvoice(invoice);
                    setZapAmount(zapAmount + amount);
                }
            })
        }
    }, [zaps]);

    return (
        <div style={{ width: width < 768 ? "auto" : width }} onClick={() => router.push(`/details/${resource.id}`)} className="flex flex-col items-center mx-auto px-4 cursor-pointer mt-8 rounded-md">
            <div style={{ maxWidth: width, minWidth: width }} className="max-tab:h-auto max-mob:h-auto">
                <Image
                    alt="resource thumbnail"
                    src={returnImageProxy(resource.image)}
                    quality={100}
                    width={width}
                    height={height}
                    className="w-full object-cover object-center rounded-md"
                />
                <div className='flex flex-col justify-start min-h-max'>
                    <h4 className="mb-1 font-bold text-2xl font-blinker">{resource.title}</h4>
                    <div style={{ height: '90px', display: 'flex', alignItems: 'flex-start' }}>
                        <p style={{
                            display: '-webkit-box',
                            WebkitBoxOrient: 'vertical',
                            WebkitLineClamp: 3,
                            overflow: 'hidden',
                            textOverflow: 'ellipsis',
                            whiteSpace: 'normal',
                            font: '400 1rem/1.5 Blinker, sans-serif',
                            flexGrow: 1
                        }}>
                            {resource.summary}
                        </p>
                    </div>
                    <div className="flex flex-row justify-between w-full">
                        <p className="text-sm mt-1 text-gray-400">Published: {formatTimestampToHowLongAgo(resource.published_at)}</p>
                        <p className="pr-2"><i className="pi pi-bolt"></i> {zapAmount}</p>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default ResourceTemplate;