'use client';

import Image from 'next/image';
import {useSession} from 'next-auth/react'
import { usePathname} from "next/navigation";
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faUser } from '@fortawesome/free-solid-svg-icons'
import { toast } from 'react-toastify';


const ProductCard = ({post, handleClick,handleEdit,handleDelete}) => {
    const {data : session} = useSession();
    const pathName = usePathname();
    let img = "https://drive.google.com/uc?export=view&id="+ post[4].split('@')[0]

  return (
    <>
        <div className="product-card" onClick={() => {if(handleClick!==null)((handleClick(post[0]))? ()=> {} :toast.error("SignIn First!")) }} >
                <>
                    <div className="card" >
                        <div className="card-img">
                            <img src={img} alt="ProductImg" />
                            
                        </div>
                        <div className="card-title">{post[2]}</div>
                        <div className="card-subtitle">Type: {post[3]}</div>
                        {/* <div className="card-subtitle">Description: {post[5]}</div> */}
                        <hr className="card-divider"/>
                        <div className="card-footer">
                            <div className="card-price"><span>₹</span>{post[6]}</div>
                            {pathName != '/profile' && (
                                <button className="card-btn">
                                    {(post[7])!='null' ?(
                                            <>
                                                <img src={post[7]} alt="Product Image" style={{width: '30px', height: '30px'}}/>
                                            </>
                                        ):(
                                            <>
                                                <FontAwesomeIcon icon={faUser} width={30} height={30} />
                                                
                                            </>
                                        )
                                    }
                                    
                                </button>
                            ) }
                            {session?.user?.id === post[1] && pathName === '/profile'  && (
                                <>
                                    <div className="handle-buttons" style={{display: "flex", flexDirection: "row", gap: "1rem", marginTop : "-1rem", transform: "translateY(0.5rem)"}}>
                                        <div onClick={handleEdit}>
                                            <p>Edit</p>
                                        </div>
                                        <div onClick={handleDelete}>
                                            <p>Delete</p>
                                        </div>
                                    </div>
                                </>
                            )}
                        </div>
                    </div>
                </>
            
        </div>

    
    </>
  )
}

export default ProductCard