"use client";

import { Coffee, Heart } from "lucide-react";
import Link from "next/link";
import { useTranslations } from "next-intl";
import { BlurFade } from "@/components/ui/blur-fade";
import { Button } from "@/components/ui/button";

export function DonationFooterCard() {
  const t = useTranslations("donation");

  return (
    <BlurFade delay={0.1}>
      <div className="p-6 rounded-xl border border-border/50 bg-card backdrop-blur-lg hover:border-primary/30 hover:shadow-lg transition-all duration-300">
        <div className="flex items-center gap-4">
          <div className="p-3 rounded-full bg-primary/10 border border-primary/20">
            <Heart className="w-8 h-8 text-primary" />
          </div>

          <div className="flex-1">
            <h3 className="font-semibold text-lg mb-1">{t("title")}</h3>
            <p className="text-sm text-muted-foreground">{t("subtitle")}</p>
          </div>

          <Link href="/apoiar">
            <Button size="sm" className="bg-primary hover:bg-primary/90">
              <Coffee className="mr-2 h-4 w-4" />
              Apoiar
            </Button>
          </Link>
        </div>
      </div>
    </BlurFade>
  );
}