donations

import React, { useState } from 'react';

import { Coffee, Heart, Star, Trophy } from 'lucide-react';

import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';

import { Button } from '@/components/ui/button';

import { Alert, AlertDescription } from '@/components/ui/alert';

const SupportComponent = () => {

  const [selectedTier, setSelectedTier] = useState(null);

  const [showThankYou, setShowThankYou] = useState(false);

  const tiers = [

    {

      name: 'Coffee',

      amount: 5,

      description: 'Buy me a coffee to keep me going!',

      icon: Coffee,

      color: 'text-orange-500'

    },

    {

      name: 'Supporter',

      amount: 10,

      description: 'Support my work and get a special thank you!',

      icon: Heart,

      color: 'text-pink-500'

    },

    {

      name: 'Star',

      amount: 25,

      description: 'Become a star supporter with exclusive updates!',

      icon: Star,

      color: 'text-yellow-500'

    },

    {

      name: 'Premium',

      amount: 50,

      description: 'Premium supporter with priority access to new content!',

      icon: Trophy,

      color: 'text-purple-500'

    }

  ];

  const handleSupport = (tier) => {

    setSelectedTier(tier);

    // Here you would integrate with your payment processor

    // For example: stripe.redirectToCheckout({ ... })

    setShowThankYou(true);

  };

  return (

    <div className="max-w-4xl mx-auto p-4">

      <div className="text-center mb-8">

        <h2 className="text-3xl font-bold mb-4">Support My Work</h2>

        <p className="text-lg text-gray-600">

          If you find my content valuable, consider supporting me to help create more amazing resources!

        </p>

      </div>

      {showThankYou && (

        <Alert className="mb-6 bg-green-50">

          <AlertDescription className="text-green-800">

            Thank you for your support! You're amazing! 🎉

          </AlertDescription>

        </Alert>

      )}

      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">

        {tiers.map((tier) => (

          <Card key={tier.name} className="flex flex-col">

            <CardHeader>

              <div className="flex items-center justify-center mb-4">

                <tier.icon className={`w-12 h-12 ${tier.color}`} />

              </div>

              <CardTitle className="text-center">{tier.name}</CardTitle>

              <CardDescription className="text-center text-2xl font-bold">

                ${tier.amount}

              </CardDescription>

            </CardHeader>

            <CardContent className="flex-grow">

              <p className="text-center text-gray-600">{tier.description}</p>

            </CardContent>

            <CardFooter className="flex justify-center">

              <Button 

                onClick={() => handleSupport(tier)}

                className="w-full bg-blue-600 hover:bg-blue-700 text-white"

              >

                Support with ${tier.amount}

              </Button>

            </CardFooter>

          </Card>

        ))}

      </div>

    </div>

  );

};

export default SupportComponent;