"use client";

import { useRouter } from "next/navigation";
import { gsap } from "gsap";
import { useEffect, useRef } from "react";

const actions = [
  { label: "Receive", path: "/receive", icon: "↓", color: "from-green-500 to-emerald-600" },
  { label: "Send", path: "/send", icon: "↑", color: "from-blue-500 to-cyan-600" },
  {
    label: "Transfer",
    path: "/transfer",
    icon: "⇄",
    color: "from-purple-500 to-pink-600",
  },
  {
    label: "Approvals",
    path: "/approvals",
    icon: "✓",
    color: "from-orange-500 to-red-600",
  },
];

export function QuickActions() {
  const router = useRouter();
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (containerRef.current) {
      const cards = containerRef.current.children;
      gsap.from(cards, {
        opacity: 0,
        y: 30,
        duration: 0.6,
        stagger: 0.1,
        ease: "power3.out",
      });
    }
  }, []);

  return (
    <div>
      <h2 className="text-2xl font-semibold mb-4">Quick Actions</h2>
      <div ref={containerRef} className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
        {actions.map((action) => (
          <button
            key={action.path}
            onClick={() => router.push(action.path)}
            className={`relative bg-gradient-to-br ${action.color} rounded-xl p-6 hover:scale-105 transition-transform duration-200 overflow-hidden group`}
          >
            <div className="absolute inset-0 bg-black/20 group-hover:bg-black/10 transition-colors" />
            <div className="relative z-10">
              <div className="text-4xl mb-2">{action.icon}</div>
              <div className="text-xl font-semibold">{action.label}</div>
            </div>
          </button>
        ))}
      </div>
    </div>
  );
}