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
