import React from "react";
import { useNavigate } from "react-router-dom";

const LowStockAlert = ({ lowStockProducts }) => {
  const navigate = useNavigate();

  if (!lowStockProducts || lowStockProducts.length === 0) return null;

  return (
    <div className="bg-yellow-50 border-2 border-yellow-200 rounded-2xl p-6">
      <div className="flex items-center gap-3 mb-4">
        <svg className="w-8 h-8 text-yellow-600" fill="currentColor" viewBox="0 0 20 20">
          <path fillRule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
        </svg>
        <div>
          <h3 className="text-xl font-bold text-yellow-900">Low Stock Alert</h3>
          <p className="text-sm text-yellow-700">{lowStockProducts.length} products need restocking</p>
        </div>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        {lowStockProducts.map((product) => (
          <div
            key={product._id}
            className="bg-white rounded-lg p-4 border border-yellow-200 flex items-center gap-4 cursor-pointer hover:shadow-md transition-shadow"
            onClick={() => navigate(`/products/${product._id}`)}
          >
            <img
              src={product.displayImage || "/bitmap.png"}
              alt={product.name}
              className="w-16 h-16 object-cover rounded-lg"
              onError={(e) => { e.target.src = "/bitmap.png"; }}
            />
            <div className="flex-1">
              <p className="font-semibold text-gray-900 text-sm line-clamp-1">{product.name}</p>
              <p className="text-xs text-red-600 font-bold mt-1">Only {product.stock} left</p>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default LowStockAlert;