'use client'

import { Plus, CreditCard, Wallet } from 'lucide-react'

interface QuickActionsProps {
  onAddDebt: () => void
  onAddCard: () => void
  onAddPayment: () => void
}

interface ActionButton {
  label: string
  icon: React.ElementType
  onClick: () => void
  color: string
}

export function QuickActions({
  onAddDebt,
  onAddCard,
  onAddPayment,
}: QuickActionsProps) {
  const actions: ActionButton[] = [
    {
      label: 'Agregar Deuda',
      icon: Plus,
      onClick: onAddDebt,
      color: 'bg-emerald-500 hover:bg-emerald-600',
    },
    {
      label: 'Nueva Tarjeta',
      icon: CreditCard,
      onClick: onAddCard,
      color: 'bg-blue-500 hover:bg-blue-600',
    },
    {
      label: 'Registrar Pago',
      icon: Wallet,
      onClick: onAddPayment,
      color: 'bg-violet-500 hover:bg-violet-600',
    },
  ]

  return (
    <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
      {actions.map((action) => {
        const Icon = action.icon
        return (
          <button
            key={action.label}
            onClick={action.onClick}
            className={`
              group flex flex-col items-center gap-3 rounded-xl p-6
              transition-all duration-200 ease-out
              ${action.color}
              focus:outline-none focus:ring-2 focus:ring-white/50 focus:ring-offset-2 focus:ring-offset-slate-800
            `}
          >
            <div className="rounded-full bg-white/20 p-4 transition-transform group-hover:scale-110">
              <Icon className="h-8 w-8 text-white" />
            </div>
            <span className="font-medium text-white">{action.label}</span>
          </button>
        )
      })}
    </div>
  )
}