discord-rpg-concept/bot/modules/economy/lootdrop.view.ts

import { ActionRowBuilder, AttachmentBuilder, ButtonBuilder, ButtonStyle } from "discord.js";
import { generateLootdropCard, generateClaimedLootdropCard } from "@/graphics/lootdrop";

export async function getLootdropMessage(reward: number, currency: string) {
    const cardBuffer = await generateLootdropCard(reward, currency);
    const attachment = new AttachmentBuilder(cardBuffer, { name: "lootdrop.png" });

    const claimButton = new ButtonBuilder()
        .setCustomId("lootdrop_claim")
        .setLabel("CLAIM REWARD")
        .setStyle(ButtonStyle.Secondary) // Changed to Secondary to fit the darker theme better? Or keep Success? Let's try Secondary with custom emoji
        .setEmoji("🌠");

    const row = new ActionRowBuilder<ButtonBuilder>()
        .addComponents(claimButton);

    return {
        content: "",
        files: [attachment],
        components: [row]
    };
}

export async function getLootdropClaimedMessage(userId: string, username: string, avatarUrl: string, amount: number, currency: string) {
    const cardBuffer = await generateClaimedLootdropCard(amount, currency, username, avatarUrl);
    const attachment = new AttachmentBuilder(cardBuffer, { name: "lootdrop_claimed.png" });

    const newRow = new ActionRowBuilder<ButtonBuilder>()
        .addComponents(
            new ButtonBuilder()
                .setCustomId("lootdrop_claim_disabled")
                .setLabel("CLAIMED")
                .setStyle(ButtonStyle.Secondary)
                .setEmoji("✅")
                .setDisabled(true)
        );

    return {
        content: ``, // Remove content as the image says it all
        files: [attachment],
        components: [newRow]
    };
}