import React, { useRef } from "react";
import "./Product_vdo_card.css";
import Add_to_card_btn from "../common_btn/Add_to_card_btn/Add_to_card_btn";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
  faArrowUpRightFromSquare,
  faCirclePlay,
} from "@fortawesome/free-solid-svg-icons";
import { Link } from "react-router-dom";
import { encodeId } from "../../../utils/common";

function Product_vdo_card({ product_id, product_vdo, product_icon, productName, productPrice, productMrp }) {
  const videoRef = useRef(null);

  const handlePlayClick = (e) => {
    e.preventDefault(); // Prevent navigation from wrapping <Link>

    const videoElement = videoRef.current;
    if (videoElement) {
      if (videoElement.requestFullscreen) {
        videoElement.requestFullscreen();
      } else if (videoElement.webkitRequestFullscreen) {
        videoElement.webkitRequestFullscreen();
      } else if (videoElement.msRequestFullscreen) {
        videoElement.msRequestFullscreen();
      }

      videoElement.play();
    }
  };

  return (
    <section className="Product_vdo_card">
      <div className="vdo_play_holder">
        <Link to={`/product-details/${encodeId(product_id)}`}>
          <div className="vdo_holder">
            <img
              src={process.env.NEXT_PUBLIC_IMG_URL + product_icon}
              className="Product_vdo"
              alt="Product"
            />
            {/* <video
              ref={videoRef}
              src={process.env.NEXT_PUBLIC_IMG_URL + product_vdo}
              className="Product_vdo"
              muted
              loop
            /> */}
          </div>
        </Link>
        {/* <div className="play_btn_holder" onClick={handlePlayClick}>
          <FontAwesomeIcon className="play_icon" icon={faCirclePlay} />
        </div> */}
      </div>

      <div className="product_info_text_holder">
        <div className="row me-0 ms-0 ">
          <div className="col-sm-3  col-5 pe-md-0 d-sm-block d-none">
            <div className="img_holder">
              <img
                src={process.env.NEXT_PUBLIC_IMG_URL + product_icon}
                className="Product_vdo_img"
                alt="Product"
              />
            </div>
          </div>
          <div className="col-sm-9 col-12">
            <div className="text_holder">
              <div>
                <h5>{productName}</h5>
                <h3>₹ {productPrice} <span>₹{productMrp}</span></h3>
              </div>
              {/* <div className="icon_holder">
                <FontAwesomeIcon
                  className="arrow_icon"
                  icon={faArrowUpRightFromSquare}
                />
              </div> */}
            </div>
          </div>
        </div>
      </div>

      <div className="add_to_cart_btn_holder">
        <Add_to_card_btn id={product_id} />
      </div>
    </section>
  );
}

export default Product_vdo_card;
