'use client';

import React from 'react';
import { Plus, Trash2, X } from 'lucide-react';

interface ReusableActionButtonsProps {
  onRenovar: () => void;
  onAnular: () => void;
  onCerrar: () => void;
  renovarText?: string;
  anularText?: string;
  cerrarText?: string;
  renovarIcon?: React.ReactNode;
  anularIcon?: React.ReactNode;
}

export default function ReusableActionButtons({
  onRenovar,
  onAnular,
  onCerrar,
  renovarText = 'Renovar Cuenta',
  anularText = 'Anular Cuenta',
  cerrarText = 'Cerrar Detalles',
  renovarIcon = <Plus size={14} />,
  anularIcon = <Trash2 size={14} />
}: ReusableActionButtonsProps) {
  return (
    <div className="flex flex-col md:flex-row gap-3 w-full">
      <button
        type="button"
        onClick={onRenovar}
        className="md:flex-1 h-10 border border-purple-500/30 dark:border-purple-500/20 hover:border-purple-500/50 hover:bg-purple-500/5 text-purple-650 dark:text-purple-400 font-bold text-[10px] uppercase tracking-widest rounded-xl transition-all cursor-pointer flex items-center justify-center gap-1.5"
      >
        {renovarIcon} {renovarText}
      </button>

      <button
        type="button"
        onClick={onAnular}
        className="md:flex-1 h-10 border border-red-500/30 dark:border-red-500/20 hover:border-red-500/50 hover:bg-red-500/5 text-red-650 dark:text-red-450 font-bold text-[10px] uppercase tracking-widest rounded-xl transition-all cursor-pointer flex items-center justify-center gap-1.5"
      >
        {anularIcon} {anularText}
      </button>
      
      <button
        type="button"
        onClick={onCerrar}
        style={{ color: '#ffffff' }}
        className="md:flex-1 h-10 bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-500 hover:to-pink-500 text-white font-bold text-[10px] uppercase tracking-widest rounded-xl shadow-[0_4px_15px_rgba(168,85,247,0.2)] transition-all cursor-pointer flex items-center justify-center gap-1.5"
      >
        <X size={14} /> {cerrarText}
      </button>
    </div>
  );
}