"use client";
import Link from "next/link";
import { StoreProduct } from "../_lib/storeApiCalls";

export default function ProductCard({ orgSlug, product }: { orgSlug: string; product: StoreProduct }) {
  return (
    <div className="col-6 col-md-4 col-lg-3">
      <Link href={`/${orgSlug}/products/${product.id}`} className="text-decoration-none text-dark">
        <div className="card h-100 shadow-none border">
          <div className="ratio ratio-1x1 bg-body-tertiary">
            {product.image ? (
              <img src={product.image} alt={product.name} className="object-fit-cover" />
            ) : (
              <div className="d-flex align-items-center justify-content-center">
                <span className="fa-solid fa-image fs-1 text-body-tertiary" />
              </div>
            )}
            {!product.in_stock && (
              <span className="badge badge-phoenix badge-phoenix-danger position-absolute top-0 end-0 m-2">Out of Stock</span>
            )}
          </div>
          <div className="card-body">
            <div className="text-body-tertiary small text-truncate">{product.category_name ?? product.brand_name ?? ""}</div>
            <div className="fw-semibold text-truncate">{product.name}</div>
            <div className="d-flex align-items-center justify-content-between mt-1">
              <span className="fw-bold text-primary">{product.base_price}</span>
              {product.average_rating != null && (
                <span className="small text-warning">
                  <span className="fa-solid fa-star me-1" />{product.average_rating}
                </span>
              )}
            </div>
          </div>
        </div>
      </Link>
    </div>
  );
}