import { AlertTriangle, BookOpen, FileText, Heart, Shield, Timer } from 'lucide-react';
import type { LucideIcon } from 'lucide-react';

import { Button } from '@/components/ui/button';
import type {
  DashboardQuickAction,
  DashboardQuickActionIconId,
} from '@/shared/constants/dashboard';
import type { ModuleId } from '@/shared/types/app';

const QUICK_ACTION_ICONS: Record<DashboardQuickActionIconId, LucideIcon> = {
  book: BookOpen,
  timer: Timer,
  shield: Shield,
  heart: Heart,
  file: FileText,
  alert: AlertTriangle,
};

interface DashboardQuickActionsProps {
  readonly actions: readonly DashboardQuickAction[];
  readonly onNavigate: (module: ModuleId) => void;
}

export function DashboardQuickActions({
  actions,
  onNavigate,
}: DashboardQuickActionsProps) {
  return (
    <section className="grid grid-cols-2 md:grid-cols-6 gap-4">
      {actions.map((action) => {
        const Icon = QUICK_ACTION_ICONS[action.iconId];

        return (
          <Button
            key={action.module}
            type="button"
            variant="ghost"
            onClick={() => onNavigate(action.module)}
            className="bg-slate-800/40 backdrop-blur-sm rounded-2xl border border-slate-700/40 p-4 hover:border-slate-600/50 transition-all duration-200 hover:-translate-y-0.5 text-left group h-auto items-start flex-col whitespace-normal"
          >
            <span className={`w-10 h-10 rounded-xl bg-gradient-to-br ${action.color} flex items-center justify-center text-white mb-3 group-hover:scale-110 transition-transform shadow-lg ${action.shadow}`}>
              <Icon size={18} />
            </span>
            <span className="font-semibold text-sm text-white">{action.label}</span>
            <span className="text-xs text-slate-500 mt-0.5">Quick access</span>
          </Button>
        );
      })}
    </section>
  );
}
