import { ShoppingBagIcon } from '@heroicons/react/24/outline';
import clsx from 'clsx';

export default function OpenCart({
  className,
  quantity
}: {
  className?: string;
  quantity?: number;
}) {
  return (
    <div className="group relative flex h-11 w-11 items-center justify-center">
      <ShoppingBagIcon
        className={clsx(
          'h-10 stroke-current transition-all ease-in-out group-hover:scale-110',
          className
        )}
        strokeWidth={0.7}
      />

      {quantity ? (
        <div className="absolute right-[23%] top-[85%] -mr-2 -mt-2 h-5 w-5 -translate-x-1/2 -translate-y-1/2 transform font-sans text-[12px] font-medium text-white">
          {quantity}
        </div>
      ) : null}
    </div>
  );
}