import Link from "next/link";
import currencyFormat from "../helpers/currencyFormat";
import { createSlug } from "../helpers/slug";

export default function productCard({ data }) {
  let product = data;
  return (
    <div className="product-card">
      <Link href={'/shop/product/' + createSlug(product.name, product.id)} className="block">
        <img src={product.image} alt={product.name} className="product-card__image" loading="lazy" />
      </Link>
      <div className="product-card__description">
        <div>
          {typeof product.manufacture.name !== undefined ? (
            <a href={'/shop/brands/' + createSlug(product.manufacture.name, product.manufacture.id)} className="product-card__brand">{product.manufacture.name}</a>
          ) : (
            <span className="product-card__brand">-</span>
          )}
          <a href={'/shop/product/' + createSlug(product.name, product.id)} className="product-card__title wrap-line-ellipsis-3">
            {product.name}
          </a>
        </div>
        <div>
          {product.lowest_price.discount_percentage > 0 ? (
            <div className="flex gap-x-1 items-center mt-2">
              <span className="badge-yellow">{product.lowest_price.discount_percentage}%</span>
              <p className="text-xs text-gray-800 line-through">{currencyFormat(product.lowest_price.price)}</p>
            </div>
          ) : ''}
          <p className="text-sm text-gray-900 font-semibold">{product.lowest_price.price_discount > 0 ? currencyFormat(product.lowest_price.price_discount) : 'Tanya harga'}</p>
        </div>
      </div>
    </div>
  )
}