'use client'

import { DashboardLayout } from '@/components/layout/DashboardLayout'
import { AlertPanel, useAlerts } from '@/components/alerts'
import { RefreshCw } from 'lucide-react'

export default function AlertsPage() {
  const { regenerateAlerts, dismissAll } = useAlerts()

  const handleRegenerateAlerts = () => {
    regenerateAlerts()
  }

  const handleDismissAll = () => {
    dismissAll()
  }

  return (
    <DashboardLayout title="Alertas">
      <div className="space-y-6">
        {/* Action Buttons */}
        <div className="flex flex-wrap gap-3">
          <button
            onClick={handleRegenerateAlerts}
            className="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500/20"
          >
            <RefreshCw className="h-4 w-4" />
            Regenerar Alertas
          </button>

          <button
            onClick={handleDismissAll}
            className="inline-flex items-center gap-2 px-4 py-2 bg-slate-800 hover:bg-slate-700 text-slate-300 hover:text-white text-sm font-medium rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-slate-500/20"
          >
            Limpiar Todas
          </button>
        </div>

        {/* Alert Panel */}
        <div className="w-full">
          <AlertPanel />
        </div>
      </div>
    </DashboardLayout>
  )
}