"use client";
import { useTranslations } from "next-intl";
import { Delete, RS } from "../Icons";
import CartProductQuantity from "../quantity-control/CartProductQuantity";
import LocalePath from "../LocalePath";
import MediaWithFallback from "../MediaWithFallback";

export default function CartCard({
  cartData,
  handleDecreaseQuantity,
  handleAddToCart,
  handleRemoveFromCart,
  loading,
  index,
}: {
  cartData: any;
  handleDecreaseQuantity: any;
  handleAddToCart: any;
  handleRemoveFromCart: any;
  loading: boolean;
  index: any;
}) {
  const t = useTranslations();

  return (
    <div
      key={index}
      className="border border-gray-200 rounded-2xl shadow-md shadow-black/10 p-4"
    >
      <div className="flex gap-4">
        <LocalePath href={`/products/${cartData?.product?.id}`}>
          <MediaWithFallback
            src={cartData?.product?.image}
            alt={cartData?.product?.name}
            className="w-24 h-24 md:w-32 md:h-32 object-cover rounded-lg flex-shrink-0"
          />
        </LocalePath>

        <div className="flex-1 min-w-0">
          <div className="flex justify-between gap-2 mb-2">
            <div>
              <h3 className="line-clamp-1 mb-1">
                {cartData?.product?.description}
              </h3>
              <p className="text-sm text-text-secondary">
                {cartData?.product?.category?.name}
              </p>
            </div>
            <button
              disabled={loading}
              onClick={() => handleRemoveFromCart(cartData)}
              className="p-2 hover:bg-gray-50 rounded-full transition-colors h-fit"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="18"
                height="18"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
                className="lucide lucide-trash2 lucide-trash-2 text-error"
              >
                <path d="M3 6h18"></path>
                <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path>
                <path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"></path>
                <line x1="10" x2="10" y1="11" y2="17"></line>
                <line x1="14" x2="14" y1="11" y2="17"></line>
              </svg>
            </button>
          </div>
          <p className="text-sm text-text-secondary mb-3 line-clamp-2">
            {cartData?.product?.description}
          </p>
          <div className="flex items-center justify-between">
            <CartProductQuantity
              quantity={cartData?.amount}
              loading={loading}
              decrease={() =>
                handleDecreaseQuantity(cartData, cartData?.amount)
              }
              AddToCart={() => handleAddToCart(cartData, cartData?.amount)}
            />
            <div className="text-left">
              <div className="flex items-center gap-1.5 justify-end">
                <RS className="*:fill-text-primary" />
                <p className="text-lg text-text-primary">
                  {cartData?.total_price}
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}