type ProductImagesSummaryProps = {
    imagesLength: number;
    totalPhotos: number;
    totalQuantity: number;
    productId: string | number;
    selectedVariation: any;
    handleDeleteAllImages: () => void;
    handleNewCalenderImages: () => void;
};

export default function ProductImagesSummary({
                                                 imagesLength,
                                                 totalPhotos,
                                                 totalQuantity,
                                                 productId,
                                                 selectedVariation,
                                                 handleDeleteAllImages,
                                                 handleNewCalenderImages,
                                             }: ProductImagesSummaryProps) {
    if (imagesLength <= 0) return null;

    return (
        <div className="px-4">
            <div className="flex items-center justify-between">
                <div className="flex items-center gap-4">
          <span className="text-md text-gray-600">
            الصور : <span className="font-semibold">{totalPhotos}</span>
          </span>

                    <span className="text-md text-gray-600 p-3">
            الكمية : <span className="font-semibold">{totalQuantity}</span>
          </span>
                </div>

                <div className="flex items-center gap-3">
                    {/*<button
                        onClick={handleDeleteAllImages}
                        className="bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200 shadow-sm hover:shadow-md"
                    >
                        حذف جميع الصور
                    </button>*/}

                   {/* {Number(productId) === 5 && (
                        <button
                            onClick={handleNewCalenderImages}
                            className="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200 shadow-sm hover:shadow-md"
                        >
                            تقويم جديد
                        </button>
                    )}*/}
                </div>
            </div>

            {Number(productId) === 3 && selectedVariation && (
                <div className="flex items-center justify-start mt-2">
          <span className="text-md text-gray-600">
            القياسات :{" "}
              <span className="font-semibold">
              {selectedVariation.width} × {selectedVariation.height} cm
            </span>
          </span>
                </div>
            )}
        </div>
    );
}