import 'package:cached_network_image/cached_network_image.dart';
import 'package:teso/Classes/API%20Clasess/Product.dart';
import 'package:teso/Pages/Sub_Pages/@Generic/productDetails.dart';
import 'package:teso/providers/pageAnimations.dart';
import 'package:teso/util/SizeConfig.dart';
import 'package:teso/util/consts.dart';
import 'package:flutter/material.dart';

buildPopularItem(BuildContext context, Product product) {
  return SizedBox(
    child: Container(
      height: 200,
      margin: EdgeInsets.only(bottom: 05),
      padding: EdgeInsets.all(10),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.only(
          topRight: Radius.circular(30),
          topLeft: Radius.circular(30),
          bottomLeft: Radius.circular(30),
          bottomRight: Radius.circular(30),
        ),
      ),
      child: ClipRRect(
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(30.0),
          topRight: Radius.circular(30.0),
          bottomLeft: Radius.circular(30),
          bottomRight: Radius.circular(30),
        ),
        child: InkWell(
          onTap: () => Navigator.push(
            context,
            PageTransition(
              type: PageTransitionType.fade,
              child: ProductDetails(
                product: product,
              ),
            ),
          ),
          child: Stack(
            fit: StackFit.passthrough,
            children: <Widget>[
              CachedNetworkImage(
                imageUrl: tesoProductThumbnail(
                  productLogo: product.productImage,
                  width: 640,
                  height: 640,
                ),
                imageBuilder: (context, imageProvider) => FadeInImage(
                  width: double.infinity,
                  fit: BoxFit.contain,
                  image: imageProvider,
                  placeholder: AssetImage("assets/images/loading.png"),
                ),
              ),
              Container(
                color: Color.fromRGBO(0, 0, 0, 0.4),
              ),
              Center(
                child: Text(
                  product.productName!.toUpperCase(),
                  style: TextStyle(
                    fontSize: SizeConfig.blockSizeHorizontal * 3.5,
                    color: Colors.white,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              )
            ],
          ),
        ),
      ),
    ),
  );
}