From 945758e8792178448a8d7962da5672e754d51b76 Mon Sep 17 00:00:00 2001
From: Alexandru Eduard Farcas <farcas.edi@gmail.com>
Date: Mon, 5 May 2025 02:54:38 +0300
Subject: [PATCH] Small update

---
 src/app/giveaways/page.tsx      |  2 ++
 src/components/GiveawayCard.tsx | 54 +++++++++++++++++++++------------
 2 files changed, 36 insertions(+), 20 deletions(-)

diff --git a/src/app/giveaways/page.tsx b/src/app/giveaways/page.tsx
index 54e832b..00439c0 100644
--- a/src/app/giveaways/page.tsx
+++ b/src/app/giveaways/page.tsx
@@ -18,6 +18,7 @@ export default async function GiveawaysPage() {
       title: true,
       description: true,
       prize: true,
+      value: true,
       endsAt: true,
     },
   });
@@ -62,6 +63,7 @@ export default async function GiveawaysPage() {
                   title={giveaway.title}
                   description={`${giveaway.description} — 🕒 ${countdownText}`}
                   imageUrl={giveaway.prize}
+                  value={giveaway.value}
                 />
               </div>
             );
diff --git a/src/components/GiveawayCard.tsx b/src/components/GiveawayCard.tsx
index 31f01a2..02744db 100644
--- a/src/components/GiveawayCard.tsx
+++ b/src/components/GiveawayCard.tsx
@@ -5,14 +5,19 @@ interface GiveawayCardProps {
     title: string;
     description: string;
     imageUrl: string;
+    value: number;
 }
 
-const GiveawayCard: React.FC<GiveawayCardProps> = ({ title, description, imageUrl }) => {
+const GiveawayCard: React.FC<GiveawayCardProps> = ({ title, description, imageUrl, value }) => {
     const [isModalOpen, setIsModalOpen] = useState(false);
 
     const handleEnterClick = () => {
-        // Logic to enter the giveaway
-        setIsModalOpen(true);
+        const activeUserCoins = 300; // Replace with actual logic to fetch active user's coins (TO DO LATER)
+        if (activeUserCoins >= value) {
+            setIsModalOpen(true);
+        } else {
+            alert("You do not have enough coins to enter this giveaway.");
+        }
     };
 
     const handleCloseModal = () => {
@@ -22,35 +27,44 @@ const GiveawayCard: React.FC<GiveawayCardProps> = ({ title, description, imageUr
     return (
         <div>
             <div className="bg-white shadow-md rounded-lg overflow-hidden flex">
-                <div className="p-4 flex-1">
-                    <h3 className="text-lg font-bold mb-2">{title}</h3>
-                    <p className="text-gray-600 text-sm">{description}</p>
-                </div>
-                <div className="p-4 flex items-center">
-                    <button
-                        className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600"
-                        onClick={handleEnterClick}
-                    >
-                        Enter
-                    </button>
-                </div>
+            <div className="p-4 flex-1">
+                <h3 className="text-lg font-bold mb-2">{title}</h3>
+                <p className="text-gray-600 text-sm">{description}</p>
+                <p className="text-gray-600 text-sm mt-2">Value: {value} coins</p>
+            </div>
+            <div className="p-4 flex items-center">
+                <button
+                className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600"
+                onClick={handleEnterClick}
+                >
+                Enter
+                </button>
+            </div>
             </div>
 
             {/* Modal */}
             {isModalOpen && (
-                <div className="fixed inset-0 bg-opacity-50 backdrop-blur-sm z-50 flex justify-center items-center">
-                    <div className="bg-white p-6 rounded-lg shadow-lg w-96">
-                        <h2 className="text-xl font-bold mb-4">{title}</h2>
-                        <p className="text-gray-600 mb-4">{description}</p>
-                        <img src={imageUrl} alt={title} className="w-full h-48 object-cover mb-4" />
+            <div className="fixed inset-0 bg-opacity-50 backdrop-blur-sm z-50 flex justify-center items-center">
+                <div className="bg-white p-6 rounded-lg shadow-lg w-96 relative">
+                <h2 className="text-xl font-bold mb-4">{title}</h2>
+                <p className="text-gray-600 mb-4">{description}</p>
+                <img src={imageUrl} alt={title} className="w-full h-48 object-cover mb-4" />
+                    <div className="flex justify-between mt-4 text-black">
                         <button
                             className="bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600"
                             onClick={handleCloseModal}
                         >
                             Close
                         </button>
+                        <button
+                            className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600"
+                            onClick={handleEnterClick}
+                        >
+                            Enter: {Math.ceil(value * 0.01)}
+                        </button>
                     </div>
                 </div>
+            </div>
             )}
         </div>
     );