'use client'

import { IProduct } from '@/lib/interfaces'
import { FC } from 'react'
import Image from 'next/image'
import Link from 'next/link'
import { Heart, Play } from 'lucide-react'

interface IProps {
    product: IProduct;
}

export const ProductCard: FC<IProps> = ({ product }) => {
    return <Link
        href="#"
        className="w-full h-full flex flex-col justify-between gap-2 bg-white hover:shadow-lg rounded-xl p-4 group transition-shadow ease-in duration-150"
    >
        <div className="rounded-md relative overflow-hidden">
            <Image
                src={product.thumbnail}
                alt={product.name}
                width={600}
                height={600}
                className="object-cover aspect-square"
            />

            {product.youtube_id && product.youtube_id.length > 0 &&
                <button className="bg-amber-600 hover:bg-gray-400 text-white px-3 py-2 rounded-md absolute left-0 bottom-0 transition-colors ease-in duration-150" title="Click to view the video">
                    <Play
                        fill="var(--color-white)"
                        size={14}
                    />
                </button>
            }

            <button className="absolute right-2 top-2 bg-gray-400/60 text-black hover:text-amber-600 w-8 h-8 rounded-full flex items-center justify-center transition-colors ease-in duration-150">
                <Heart
                    size={16}
                />
            </button>
        </div>

        <div className="font-semibold text-sm text-[#888] group-hover:text-amber-600 transition-colors ease-in duration-150 line-clamp-2 text-ellipsis" title={product.name}>{product.name}</div>

        <div className="text-gray-500 italic text-[13px]">{product.short_description}</div>

        <div className="grid grid-cols-3">
            <strong className="text-gray-600 col-span-2">Market MRP</strong>
            <span className="text-amber-600 text-end">Rs. {product.market_mrp}</span>
            <div className="col-span-2">
                <strong className="text-gray-600">Wholesale Price</strong>
                <button className="text-[12px] transition-colors ease-in duration-150 text-amber-600 hover:text-[#888] ms-2">Login to view</button>
            </div>
            <div className="flex items-center justify-end">
                <button className="rounded-md border-2 border-gray-300 hover:border-amber-600 hover:bg-amber-600 px-2 py-0.5 text-[#888] hover:text-white text-[12px] transition-colors ease-in duration-150 flex items-center justify-between">Buy Now</button>
            </div>
        </div>
    </Link>
}