import { ComponentProps, ReactNode } from "react";
import clsx from "clsx";

interface ShoppingCartIconProps extends ComponentProps<"svg"> {
  icon?: ReactNode;
}

export default function ShoppingCartIcon({
  className,
  icon,
}: ShoppingCartIconProps) {
  // 如果传了 icon → 直接返回自定义图标
  if (icon) {
    return <>{icon}</>;
  }

  // 没传 → 返回默认购物车图标
  return (
    <svg
      className={clsx("fill-primary h-5 w-5 dark:fill-transparent", className)}
      fill="none"
      stroke="currentColor"
      strokeWidth="1.5"
      viewBox="0 0 24 24"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 0 0-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 0 0-16.536-1.84M7.5 14.25 5.106 5.272M6 20.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm12.75 0a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  );
}

export function BasketCartIcon(props: React.ComponentProps<"svg">) {
  return (
    <svg
      className={clsx(
        "fill-ptimary h-48 w-48 dark:fill-transparent",
        props.className,
      )}
      fill="none"
      stroke="currentColor"
      strokeWidth="1.5"
      viewBox="0 0 24 24"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 0 0-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 0 0-16.536-1.84M7.5 14.25 5.106 5.272M6 20.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm12.75 0a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  );
}
