import React from 'react';
import { AlertTriangle, AlertCircle, ShoppingCart } from 'lucide-react';
import { useNavigate } from 'react-router-dom';
import { motion, AnimatePresence } from 'framer-motion';

const SignatureCreditAlert = ({ credits }) => {
  const navigate = useNavigate();
  
  if (!credits || credits.remaining > 20) return null;

  const isCritical = credits.remaining < 10;

  return (
    <AnimatePresence>
      <motion.div
        initial={{ opacity: 0, y: -20 }}
        animate={{ opacity: 1, y: 0 }}
        className={`mb-6 p-4 rounded-xl border ${
          isCritical 
            ? 'bg-red-50 border-red-200 dark:bg-red-900/20 dark:border-red-800' 
            : 'bg-orange-50 border-orange-200 dark:bg-orange-900/20 dark:border-orange-800'
        }`}
      >
        <div className="flex items-center justify-between flex-wrap gap-4">
          <div className="flex items-center gap-3">
            <div className={`p-2 rounded-lg ${
              isCritical ? 'bg-red-100 text-red-600' : 'bg-orange-100 text-orange-600'
            }`}>
              {isCritical ? <AlertCircle className="w-5 h-5" /> : <AlertTriangle className="w-5 h-5" />}
            </div>
            <div>
              <h3 className={`font-bold ${
                isCritical ? 'text-red-900 dark:text-red-200' : 'text-orange-900 dark:text-orange-200'
              }`}>
                {isCritical ? 'Stock de signatures critique !' : 'Stock de signatures faible'}
              </h3>
              <p className={`text-sm ${
                isCritical ? 'text-red-700 dark:text-red-300' : 'text-orange-700 dark:text-orange-300'
              }`}>
                Il ne vous reste que <strong>{credits.remaining} crédits</strong>. 
                {isCritical ? ' Rechargez maintenant pour éviter tout blocage.' : ' Pensez à recharger votre compte.'}
              </p>
            </div>
          </div>
          
          <button
            onClick={() => navigate('/signature/purchase')}
            className={`flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-semibold transition-colors ${
              isCritical
                ? 'bg-red-600 hover:bg-red-700 text-white shadow-md shadow-red-600/20'
                : 'bg-orange-500 hover:bg-orange-600 text-white shadow-md shadow-orange-500/20'
            }`}
          >
            <ShoppingCart className="w-4 h-4" />
            Acheter des crédits
          </button>
        </div>
      </motion.div>
    </AnimatePresence>
  );
};

export default SignatureCreditAlert;