'use client';

import type { LucideIcon } from 'lucide-react';
import { Plus, Link as LinkIcon, FileText, Settings, Key, Rocket, Book, CreditCard, HelpCircle, Download } from 'lucide-react';
import Link from 'next/link';

import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card';

interface QuickAction {
  label: string;
  href: string;
  icon: string;
}

interface QuickActionsPanelProps {
  actions: QuickAction[];
}

const iconMap: Record<string, LucideIcon> = {
  Plus,
  Link: LinkIcon,
  FileText,
  Settings,
  Key,
  Rocket,
  Book,
  CreditCard,
  HelpCircle,
  Download,
};

export function QuickActionsPanel({ actions }: QuickActionsPanelProps) {
  return (
    <Card className="bg-gray-800 border-gray-700">
      <CardHeader>
        <CardTitle className="text-white">Quick Actions</CardTitle>
      </CardHeader>
      <CardContent>
        <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
          {actions.map((action) => {
            const Icon = iconMap[action.icon] || Plus;
            return (
              <Link
                key={action.href}
                href={action.href}
                className="flex flex-col items-center justify-center p-4 bg-gray-900 rounded-lg hover:bg-gray-700 transition-colors group"
              >
                <Icon className="h-6 w-6 text-gray-400 group-hover:text-orange-500 mb-2 transition-colors" />
                <span className="text-xs text-center text-gray-300 group-hover:text-white transition-colors">
                  {action.label}
                </span>
              </Link>
            );
          })}
        </div>
      </CardContent>
    </Card>
  );
}