import React from 'react';
import { Button } from '../../ui/Button';
import type { NotificationData } from '../../../hooks/useNotifications';
import { useAlertActions } from '../../../hooks/useAlertActions';

export interface AlertContextActionsProps {
  alert: NotificationData;
}

const AlertContextActions: React.FC<AlertContextActionsProps> = ({ alert }) => {
  const { getActions, executeAction } = useAlertActions();
  const actions = getActions(alert);

  if (actions.length === 0) {
    return null;
  }

  return (
    <div className="mb-4">
      <p className="text-xs font-semibold mb-2 uppercase tracking-wide text-[var(--text-primary)]">
        Acciones Recomendadas
      </p>
      <div className="flex flex-wrap gap-2">
        {actions.map((action, index) => {
          const variantMap: Record<string, 'primary' | 'secondary' | 'outline'> = {
            primary: 'primary',
            secondary: 'secondary',
            outline: 'outline',
          };

          return (
            <Button
              key={index}
              variant={variantMap[action.variant] || 'outline'}
              size="sm"
              onClick={() => executeAction(alert, action)}
              className="flex items-center gap-2"
            >
              <span>{action.icon}</span>
              <span>{action.label}</span>
            </Button>
          );
        })}
      </div>
    </div>
  );
};

export default AlertContextActions;
