'use client';

import { useRouter } from 'next/navigation';
import { motion } from 'framer-motion';

interface Action {
  label: string;
  icon: string;
  color: string;
  href?: string;
  onClick?: () => void;
}

export default function QuickActions({ actions }: { actions: Action[] }) {
  const router = useRouter();

  return (
    <div className="grid grid-cols-2 gap-2">
      {actions.map((action, i) => (
        <motion.button
          key={action.label}
          initial={{ opacity: 0, y: 8 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: i * 0.06 }}
          whileHover={{ scale: 1.02 }}
          whileTap={{ scale: 0.97 }}
          onClick={() => {
            if (action.href) router.push(action.href);
            else action.onClick?.();
          }}
          className={`flex items-center gap-2 px-3 py-2.5 rounded-none border text-xs font-semibold transition-all cursor-pointer text-left ${action.color}`}
        >
          <i className={`${action.icon} text-sm`} />
          <span className="leading-tight">{action.label}</span>
        </motion.button>
      ))}
    </div>
  );
}