import React, { useState } from 'react';

interface Ad {
title: string;
reward: number;
watched: boolean;
}

const WatchAdsToMoney = () => {
const [ads, setAds] = useState<Ad[]>([
{ title: 'Ad 1', reward: 10, watched: false },
{ title: 'Ad 2', reward: 20, watched: false },
{ title: 'Ad 3', reward: 30, watched: false },
]);

const [balance, setBalance] = useState(0);

const handleWatchAd = (index: number) => {
const newAds = [...ads];
newAds[index].watched = true;
setAds(newAds);
setBalance(balance + newAds[index].reward);
};

return (
<div className="max-w-md mx-auto p-4 bg-white rounded-md shadow-md">
<h1 className="text-3xl font-bold mb-4">Watch Ads to Earn Money</h1>
<p className="text-lg mb-4">Your balance: ${balance}</p>
<div className="flex flex-col gap-4">
{ads.map((ad, index) => (
<div key={index} className="bg-gray-100 p-4 rounded-md">
<h2 className="text-lg font-bold">{ad.title}</h2>
<p className="text-sm">Reward: ${ad.reward}</p>
<button
className={`mt-2 py-2 px-4 rounded-md ${
ad.watched ? 'bg-gray-400 cursor-not-allowed' : 'bg-blue-500 hover:bg-blue-700 text-white'
}`}
onClick={() => handleWatchAd(index)}
disabled={ad.watched}
>
{ad.watched ? 'Already watched' : 'Watch ad'}
</button>
</div>
))}
</div>
</div>
);
};

export default WatchAdsToMoney;