'use client';

import React from 'react';
import Link from 'next/link';
import { useSelector } from 'react-redux';
import { RootState } from '@/store';
import { ShoppingBag } from 'lucide-react';

export function FloatingCartButton() {
  const { totalQuantity, grandTotal } = useSelector((state: RootState) => state.cart);

  if (totalQuantity === 0) return null;

  return (
    <Link
      href="/cart"
      className="fixed bottom-6 left-6 z-40 md:hidden bg-gradient-to-r from-saffron-600 to-amber-700 text-white px-5 py-3.5 rounded-full shadow-2xl flex items-center gap-3 border border-white/20 hover:scale-105 active:scale-95 transition-transform"
    >
      <div className="relative">
        <ShoppingBag className="w-5 h-5" />
        <span className="absolute -top-2 -right-2 w-4 h-4 rounded-full bg-white text-saffron-700 font-extrabold text-[10px] flex items-center justify-center">
          {totalQuantity}
        </span>
      </div>
      <span className="font-extrabold text-xs">View Cart (₹{grandTotal})</span>
    </Link>
  );
}