// import React from 'react'
// import './Common_Product_Card.css'
// import { useRouter } from 'next/navigation'

// const Common_Product_Card = (props) => {

//     const navigate = useRouter()

//     return (
//         <section className='Common_Product_Card' onClick={() => {navigate.push(props?.goto)}}>
//             <div  className={`outer_colored_card ${props?.theme_colour}`}>
//                 <div className='img_holder'>
//                     <img src={props?.prodImg} className='prod_img' />
//                 </div>

//                 <div className='text_holder'>
//                     <p className='prod_name'>{props?.prodName}</p>
//                 </div>
//             </div>
//         </section>
//     )
// }

// export default Common_Product_Card
"use client";

import React from "react";
import "./Common_Product_Card.css";
import { useRouter } from "next/navigation";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faArrowRight } from "@fortawesome/free-solid-svg-icons";

const Common_Product_Card = (props) => {
  const navigate = useRouter();

  return (
    <section
      className="Common_Product_Card"
      onClick={() => navigate.push(props?.goto)}
    >
      <div className={`outer_colored_card ${props?.theme_colour}`}>
        {/* Image */}
        <div className="img_holder">
          <img
            src={props?.prodImg}
            className="prod_img"
            alt={props?.prodName || "product"}
          />

          <div className="image_overlay" />
        </div>

        {/* Content */}
        <div className="text_holder">
          <div className="category_content">
            <p className="prod_name">{props?.prodName}</p>

            <div className="explore_text">
              <span>Explore</span>
              <FontAwesomeIcon icon={faArrowRight} />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default Common_Product_Card;
