"use client";

import * as React from "react";

import { cn } from "@/lib/utils";
import { PriceTag } from "@/components/ui/price-tag";
import { QuantitySelector } from "@/components/ui/quantity-selector";

export interface CartItemProps extends React.HTMLAttributes<HTMLDivElement> {
  name: string;
  price: number | string;
  currency?: string;
  quantity?: number;
  defaultQuantity?: number;
  min?: number;
  max?: number;
  imageSrc?: string;
  imageAlt?: string;
  subtotal?: number | string;
  subtotalLabel?: string;
  showSubtotal?: boolean;
  onQuantityChange?: (quantity: number) => void;
  onRemove?: () => void;
}

const formatAmount = (value: number | string) => {
  if (typeof value === "number") {
    return value.toLocaleString(undefined, {
      minimumFractionDigits: 2,
      maximumFractionDigits: 2,
    });
  }

  return value;
};

const formatCurrency = (value: number | string, currency: string) => {
  if (typeof value === "number") {
    return `${currency}${formatAmount(value)}`;
  }

  return value;
};

export function CartItem({
  name,
  price,
  currency = "$",
  quantity,
  defaultQuantity = 1,
  min = 1,
  max,
  imageSrc,
  imageAlt = "Cart item image",
  subtotal,
  subtotalLabel = "Subtotal",
  showSubtotal = true,
  onQuantityChange,
  onRemove,
  className,
  ...props
}: CartItemProps) {
  const isControlled = quantity !== undefined;
  const [internalQuantity, setInternalQuantity] = React.useState(defaultQuantity);
  const currentQuantity = isControlled ? quantity ?? defaultQuantity : internalQuantity;

  const handleQuantityChange = (nextValue: number) => {
    if (!isControlled) {
      setInternalQuantity(nextValue);
    }
    onQuantityChange?.(nextValue);
  };

  const computedSubtotal = React.useMemo(() => {
    if (subtotal !== undefined) {
      return subtotal;
    }
    const numericPrice =
      typeof price === "number"
        ? price
        : Number.parseFloat(String(price));
    if (!Number.isFinite(numericPrice)) {
      return undefined;
    }
    return numericPrice * currentQuantity;
  }, [subtotal, price, currentQuantity]);

  const formattedSubtotal =
    computedSubtotal !== undefined
      ? formatCurrency(computedSubtotal, currency)
      : null;

  const quantityValue = isControlled ? currentQuantity : undefined;
  const quantityDefault = isControlled ? undefined : defaultQuantity;

  return (
    <div
      className={cn(
        "flex flex-col gap-4 rounded-xl border border-border bg-card p-4 sm:flex-row sm:items-center",
        className
      )}
      {...props}
    >
      <div className="h-20 w-20 shrink-0 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-xs text-muted-foreground">No image</span>
          </div>
        )}
      </div>
      <div className="flex flex-1 flex-col gap-3">
        <div className="flex items-start justify-between gap-4">
          <div className="space-y-1">
            <p className="text-sm font-medium text-foreground">{name}</p>
            <PriceTag price={price} currency={currency} size="sm" />
          </div>
          <button
            type="button"
            className="inline-flex items-center gap-1 rounded-md px-2 py-1 text-xs text-muted-foreground transition hover:text-foreground focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current disabled:pointer-events-none disabled:opacity-50"
            onClick={onRemove}
            disabled={!onRemove}
          >
            <TrashIcon />
            <span>Remove</span>
          </button>
        </div>
        <div className="flex flex-wrap items-center justify-between gap-3">
          <QuantitySelector
            value={quantityValue}
            defaultValue={quantityDefault}
            min={min}
            max={max}
            onChange={handleQuantityChange}
          />
          {showSubtotal && formattedSubtotal ? (
            <div className="text-right">
              <p className="text-xs text-muted-foreground">
                {subtotalLabel}
              </p>
              <p className="text-sm font-semibold text-foreground">
                {formattedSubtotal}
              </p>
            </div>
          ) : null}
        </div>
      </div>
    </div>
  );
}

function TrashIcon() {
  return (
    <svg viewBox="0 0 24 24" aria-hidden="true" className="h-3.5 w-3.5">
      <path
        d="M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m3 0v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6h14Z"
        fill="none"
        stroke="currentColor"
        strokeWidth={1.5}
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  );
}
Cart Item

Dependencies

Files

Installation
