import { Button } from '@/components/ui/button'
import clsx from 'clsx'
import { ShoppingBag } from 'lucide-react'
import React from 'react'

export function OpenCartButton({
  className,
  quantity,
  ...rest
}: {
  className?: string
  quantity?: number
}) {
  return (
    <Button
      aria-label="Open cart"
      size="icon"
      className={clsx(
        'relative h-10 w-10 rounded-full border-0 bg-transparent p-0 text-[#1f4f3b] shadow-none transition-colors hover:bg-[#eef5ef] hover:text-[#14422d] dark:text-white dark:hover:bg-white/10',
        className,
      )}
      {...rest}
    >
      <ShoppingBag className="h-5 w-5" strokeWidth={2} />

      {quantity ? (
        <span className="absolute -right-1 -top-1 inline-flex min-h-5 min-w-5 items-center justify-center rounded-full bg-[#14422d] px-1 text-[11px] font-semibold leading-none text-white">
          {quantity}
        </span>
      ) : null}
    </Button>
  )
}