import React from "react";
import Image from "next/image";

export default function AddToCartModal({
  isOpen,
  onClose,
  product,
  quantity,
  setQuantity,
  onAddToCart,
}) {
  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-end">
      <div className="bg-white w-full rounded-t-2xl p-4">
        <div className="flex items-start mb-4">
          <Image
            src={product.imageUrl}
            alt={product.title}
            width={80}
            height={80}
            className="rounded-lg"
          />
          <div className="ml-3 flex-1">
            <div className="flex justify-between">
              <span className="text-red-500 text-xl">¥{product.price}</span>
              <button onClick={onClose} className="text-gray-400">
                ✕
              </button>
            </div>
            <div className="text-sm text-gray-500 mt-1">
              库存{product.stock}件
            </div>
          </div>
        </div>

        <div className="flex items-center justify-between mb-6">
          <span>购买数量</span>
          <div className="flex items-center">
            <button
              className="w-8 h-8 border rounded-l flex items-center justify-center"
              onClick={() => setQuantity(Math.max(1, quantity - 1))}
            >
              -
            </button>
            <span className="w-12 h-8 border-t border-b flex items-center justify-center">
              {quantity}
            </span>
            <button
              className="w-8 h-8 border rounded-r flex items-center justify-center"
              onClick={() => setQuantity(quantity + 1)}
            >
              +
            </button>
          </div>
        </div>

        <button
          onClick={onAddToCart}
          className="w-full bg-yellow-400 text-white py-3 rounded-full"
        >
          加入购物车
        </button>
      </div>
    </div>
  );
}