"use client";

import * as React from "react";

import { cn } from "@/lib/utils";
import { PriceTag } from "@/components/ui/price-tag";
import { WishlistButton } from "@/components/ui/wishlist-button";

export interface ProductCardProps
  extends React.HTMLAttributes<HTMLDivElement> {
  title: string;
  price: number | string;
  originalPrice?: number | string;
  currency?: string;
  rating?: number;
  ratingCount?: number;
  imageSrc?: string;
  imageAlt?: string;
  quickAddLabel?: string;
  onQuickAdd?: () => void;
  wishlistActive?: boolean;
  defaultWishlistActive?: boolean;
  onWishlistToggle?: (active: boolean) => void;
  showSaleBadge?: boolean;
  saleLabel?: string;
}

export function ProductCard({
  title,
  price,
  originalPrice,
  currency = "$",
  rating = 0,
  ratingCount,
  imageSrc,
  imageAlt = "Product image",
  quickAddLabel = "Quick add",
  onQuickAdd,
  wishlistActive,
  defaultWishlistActive,
  onWishlistToggle,
  showSaleBadge = false,
  saleLabel,
  className,
  ...props
}: ProductCardProps) {
  const hasRating = rating > 0;

  return (
    <div
      className={cn(
        "flex flex-col gap-4 rounded-xl border border-border bg-card p-4",
        className
      )}
      {...props}
    >
      <div className="relative aspect-[4/3] w-full overflow-hidden rounded-lg border border-border bg-muted">
        {imageSrc ? (
          <img
            src={imageSrc}
            alt={imageAlt}
            className="h-full w-full object-cover"
          />
        ) : (
          <div className="flex h-full w-full items-center justify-center">
            <span className="text-sm text-muted-foreground">
              Image placeholder
            </span>
          </div>
        )}
        <div className="absolute right-3 top-3">
          <WishlistButton
            active={wishlistActive}
            defaultActive={defaultWishlistActive}
            onActiveChange={onWishlistToggle}
          />
        </div>
      </div>
      <div className="flex flex-col gap-3">
        <div className="flex items-start justify-between gap-4">
          <div className="space-y-2">
            <h3 className="text-base font-semibold text-foreground">
              {title}
            </h3>
            {hasRating ? (
              <div className="flex flex-wrap items-center gap-2">
                <RatingStars value={rating} />
                {ratingCount !== undefined ? (
                  <span className="text-xs text-muted-foreground">
                    {ratingCount} reviews
                  </span>
                ) : null}
              </div>
            ) : null}
          </div>
          <PriceTag
            price={price}
            originalPrice={originalPrice}
            currency={currency}
            size="sm"
            showSaleBadge={showSaleBadge}
            saleLabel={saleLabel}
          />
        </div>
        <button
          type="button"
          className="inline-flex items-center justify-center rounded-md border border-border bg-muted px-4 py-2 text-sm font-semibold text-foreground transition hover:opacity-90 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current disabled:pointer-events-none disabled:opacity-60"
          onClick={onQuickAdd}
          disabled={!onQuickAdd}
        >
          {quickAddLabel}
        </button>
      </div>
    </div>
  );
}

function RatingStars({ value, max = 5 }: { value: number; max?: number }) {
  return (
    <div className="inline-flex items-center gap-1" aria-label={`Rated ${value} out of ${max}`}>
      {Array.from({ length: max }, (_, index) => {
        const fillPercent = Math.min(1, Math.max(0, value - index));
        return (
          <span key={`star-${index}`} className="relative inline-flex">
            <StarIcon className="h-4 w-4 text-muted-foreground" filled />
            <span
              className="absolute inset-0 overflow-hidden text-primary"
              style={{ width: `${fillPercent * 100}%` }}
            >
              <StarIcon className="h-4 w-4" filled />
            </span>
          </span>
        );
      })}
    </div>
  );
}

function StarIcon({
  className,
  filled = false,
}: {
  className?: string;
  filled?: boolean;
}) {
  return (
    <svg viewBox="0 0 24 24" aria-hidden="true" className={className}>
      <path
        d="M11.48 3.5c.2-.5.84-.5 1.04 0l2.16 5.3a1 1 0 0 0 .77.6l5.72.54c.54.05.76.73.35 1.08l-4.33 3.8a1 1 0 0 0-.32.98l1.3 5.6c.12.53-.45.95-.92.67l-4.9-2.92a1 1 0 0 0-1.02 0l-4.9 2.92c-.47.28-1.04-.14-.92-.67l1.3-5.6a1 1 0 0 0-.32-.98l-4.33-3.8c-.41-.35-.19-1.03.35-1.08l5.72-.54a1 1 0 0 0 .77-.6l2.16-5.3Z"
        fill={filled ? "currentColor" : "none"}
        stroke="currentColor"
        strokeWidth={1.2}
      />
    </svg>
  );
}
Product Card

Nimbus Travel Backpack

Dependencies

Files

Installation
