import 'package:cached_network_image/cached_network_image.dart';
import 'package:e_commerce_training/res/R.dart';
import 'package:e_commerce_training/src/model/response/featured_product.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';



class ProductItemWidget extends StatelessWidget {
  const ProductItemWidget({
    Key? key,
    required this.featuredProduct,
    required this.voidCallback,
  }) : super(key: key);

  final FeaturedProduct featuredProduct;
  final VoidCallback voidCallback;

  @override
  Widget build(BuildContext context) {
    double width = ((MediaQuery.of(context).size.width - 20) / 3);
    return Container(
      width: width,
      child: Card(
        child: InkWell(
          onTap: voidCallback,
          child: Column(
            mainAxisSize: MainAxisSize.min,
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Container(
                height: width,
                width: width,
                alignment: Alignment.center,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(4),
                      topRight: Radius.circular(4)),
                  image: DecorationImage(
                      image: CachedNetworkImageProvider(
                          featuredProduct.image ?? ""),
                      fit: BoxFit.cover),
                ),
              ),
              SizedBox(
                height: 5,
              ),
              Padding(
                padding: const EdgeInsets.symmetric(horizontal: 5),
                child: Text(
                  featuredProduct.name ?? "",
                  style: TextStyle(fontSize: 40.sp, color: R.color.black),
                  maxLines: 2,
                  overflow: TextOverflow.ellipsis,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
