'use client'

import { cn } from '@/lib/utils'
import { FileText, FileSpreadsheet } from 'lucide-react'

interface ReportCardProps {
  title: string
  description: string
  onExportPdf: () => void
  onExportExcel: () => void
  loading?: boolean
}

export default function ReportCard({
  title,
  description,
  onExportPdf,
  onExportExcel,
  loading = false,
}: ReportCardProps) {
  const btnBase =
    'inline-flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-50'
  const btnPrimary =
    'bg-cyan-600 text-white hover:bg-cyan-500'
  const btnOutlined =
    'border border-white/10 text-gray-300 hover:bg-white/5 hover:text-gray-200'

  return (
    <div
      className={cn(
        'rounded-xl border border-white/10 overflow-hidden',
        'bg-gradient-to-b from-dark-300/90 to-dark-400/90',
        'flex flex-col'
      )}
    >
      <div className="border-b border-white/10 px-4 py-4">
        <h3 className="text-lg font-semibold text-white">{title}</h3>
        <p className="mt-2 text-sm text-gray-400">{description}</p>
      </div>
      <div className="flex flex-wrap items-center gap-2 p-4">
        <button
          type="button"
          onClick={onExportPdf}
          disabled={loading}
          className={cn(btnBase, btnPrimary)}
        >
          <FileText className="h-4 w-4" />
          Exportar PDF
        </button>
        <button
          type="button"
          onClick={onExportExcel}
          disabled={loading}
          className={cn(btnBase, btnOutlined)}
        >
          <FileSpreadsheet className="h-4 w-4" />
          Excel
        </button>
      </div>
    </div>
  )
}