import React from 'react';

import { Card, CardContent, CardHeader, CardTitle } 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 }) => {
  return (
    <Card className="bg-black/30 border-accent/50 backdrop-blur-sm">
      <CardHeader>
        <CardTitle className="text-accent neon-glow">Support Wildlife</CardTitle>
      </CardHeader>
      <CardContent>
        <div className="space-y-4">
          <p className="text-foreground/80">Your donation helps protect and preserve the habitats of these amazing creatures.</p>
          <div className="flex items-center justify-center p-4 bg-accent/10 rounded-md">
            <svg xmlns="http://www.w3.org/2000/svg" className="h-12 w-12 text-accent" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08 .402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
          </div>
          <Input type="number" placeholder="Amount in USD" className="bg-black/50 border-accent/30 text-foreground" />
          <Button className="w-full bg-accent text-accent-foreground hover:bg-accent/80">Donate Now</Button>
        </div>
      </CardContent>
    </Card>
  );
};

export default DonationPanel;