owl-stream/app/components/DonationPanel.tsx

"use client";

import React, { useState } from 'react';

import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";

interface DonationPanelProps {
  id: string;
}

const DonationPanel: React.FC<DonationPanelProps> = ({ id }) => {
  const [amount, setAmount] = useState<number>(25);
  const [donated, setDonated] = useState<boolean>(false);
  const [donationInProgress, setDonationInProgress] = useState<boolean>(false);

  const handleAmountChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = parseInt(e.target.value);
    if (!isNaN(value)) {
      setAmount(value);
    } else {
      setAmount(0);
    }
  };

  const handleDonate = () => {
    if (amount > 0) {
      setDonationInProgress(true);
      // Simulate API call
      setTimeout(() => {
        setDonated(true);
        setDonationInProgress(false);
      }, 1500);
    }
  };

  const predefinedAmounts = [10, 25, 50, 100];

  return (
    <Card className="border-ccfw-teal/30 bg-gradient-to-b from-ccfw-beige/20 to-ccfw-beige/5 backdrop-blur-sm">
      <CardHeader className="border-b border-ccfw-teal/20 bg-ccfw-beige/10">
        <CardTitle className="text-ccfw-teal">Support Wildlife</CardTitle>
        <CardDescription className="text-ccfw-maroon font-medium">
          Help protect the wildlife featured in Livestream {id}
        </CardDescription>
      </CardHeader>
      <CardContent className="pt-4">
        {!donated ? (
          <div className="space-y-4">
            <p className="text-ccfw-maroon font-medium">Your donation helps protect and preserve the habitats of these amazing creatures.</p>
            
            <div className="grid grid-cols-4 gap-2 my-4">
              {predefinedAmounts.map((presetAmount) => (
                <Button 
                  key={presetAmount} 
                  variant={amount === presetAmount ? "default" : "outline"}
                  className={amount === presetAmount ? "bg-ccfw-teal text-white" : "border-ccfw-teal/30 text-foreground hover:bg-ccfw-teal/10"}
                  onClick={() => setAmount(presetAmount)}
                >
                  ${presetAmount}
                </Button>
              ))}
            </div>
            
            <div className="relative">
              <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                <span className="text-ccfw-maroon font-medium">$</span>
              </div>
              <Input 
                type="number" 
                value={amount} 
                onChange={handleAmountChange}
                className="bg-ccfw-beige/20 border-ccfw-teal/30 text-foreground pl-7" 
                placeholder="Custom amount"
              />
            </div>
            
            <div className="flex items-center space-x-2 pt-2">
              <div className="h-10 w-10 rounded-full bg-ccfw-gold/20 flex items-center justify-center">
                <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-ccfw-gold" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
              </div>
              <p className="text-sm text-ccfw-maroon font-medium">100% of donations go directly to CCFW conservation efforts</p>
            </div>
            
            <Button 
              onClick={handleDonate}
              disabled={amount <= 0 || donationInProgress}
              className="w-full bg-ccfw-teal text-white hover:bg-ccfw-teal/80 relative overflow-hidden"
            >
              {donationInProgress ? (
                <>
                  <span className="opacity-0">Donate Now</span>
                  <span className="absolute inset-0 flex items-center justify-center">
                    <svg className="animate-spin h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
                      <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                    </svg>
                  </span>
                </>
              ) : (
                `Donate $${amount}`
              )}
            </Button>
          </div>
        ) : (
          <div className="space-y-4 text-center">
            <div className="mx-auto w-16 h-16 rounded-full bg-ccfw-gold/20 flex items-center justify-center">
              <svg xmlns="http://www.w3.org/2000/svg" className="h-8 w-8 text-ccfw-gold" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
              </svg>
            </div>
            <h3 className="text-xl font-bold text-ccfw-teal">Thank You!</h3>
            <p className="text-ccfw-maroon font-medium">Your donation of ${amount} will help protect Florida wildlife.</p>
            <div className="text-sm text-ccfw-maroon font-medium mt-2">
              Cape Coral Friends of Wildlife is a 501(c)(3) non-profit organization.
              All donations are tax-deductible.
            </div>
            <Button onClick={() => setDonated(false)} variant="outline" className="border-ccfw-teal/30 text-ccfw-teal mt-4 hover:bg-ccfw-teal/10">
              Make Another Donation
            </Button>
          </div>
        )}
      </CardContent>
    </Card>
  );
};

export default DonationPanel;