"use client";

import { Coins, Shield } from "lucide-react";
import { useTranslations } from "next-intl";
import { Button } from "@/components/ui/button";

export function EscrowBanner() {
  const t = useTranslations("home.escrow");

  return (
    <section className="py-8 bg-gradient-to-r from-green-500/10 via-blue-500/10 to-green-500/10 border-b border-green-500/20">
      <div className="container">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-4">
            <div className="w-12 h-12 bg-green-500/20 rounded-full flex items-center justify-center">
              <Shield className="w-6 h-6 text-green-500" />
            </div>
            <div>
              <h2 className="text-xl font-bold text-foreground">
                {t("title")}
              </h2>
              <p className="text-muted-foreground">{t("description")}</p>
            </div>
          </div>

          <div className="flex items-center gap-4">
            <div className="text-right">
              <p className="text-sm text-muted-foreground">Escrow Balance</p>
              <p className="text-lg font-bold text-foreground">🪙 0 gp</p>
            </div>
            <Button className="bg-green-600 hover:bg-green-700 text-white">
              <Coins className="w-4 h-4 mr-2" />
              {t("deposit")}
            </Button>
          </div>
        </div>
      </div>
    </section>
  );
}