SweetHome/app/components/FloatingSidebar.js

'use client';

import { useState } from 'react';
import { motion } from 'framer-motion';
import Link from 'next/link';
import { Heart, Bell, CreditCard } from 'lucide-react';
import { useFavorites } from '@/app/contexts/FavoritesContext';

export default function FloatingSidebar({ isRTL }) {
  const { favorites } = useFavorites();
  const [tooltip, setTooltip] = useState(null);
  let timeoutId = null;

  const showTooltip = (id) => {
    timeoutId = setTimeout(() => {
      setTooltip(id);
    }, 300);
  };

  const hideTooltip = () => {
    clearTimeout(timeoutId);
    setTooltip(null);
  };

  const side = isRTL ? 'left' : 'right';
  const positionStyle = {
    [side]: 0,
    top: '50%',
    transform: 'translateY(-50%)',
  };

  const cardVariants = {
    initial: { opacity: 0, x: isRTL ? -20 : 20 },
    animate: { opacity: 1, x: 0, transition: { duration: 0.4, ease: 'easeOut' } },
  };

  const buttonVariants = {
    rest: { scale: 1, backgroundColor: 'rgba(255,255,255,0)' },
    hover: { scale: 1.05, backgroundColor: 'rgba(245,158,11,0.1)', transition: { duration: 0.2 } },
    tap: { scale: 0.95 },
  };

  return (
    <motion.div
      className="fixed z-50"
      style={positionStyle}
      variants={cardVariants}
      initial="initial"
      animate="animate"
    >
      <div className="bg-white/80 backdrop-blur-md rounded-2xl shadow-lg border border-gray-200/50 py-3 px-2 flex flex-col gap-3 transition-all duration-300 hover:shadow-xl hover:bg-white/90">
        <motion.div
          className="relative group"
          variants={buttonVariants}
          initial="rest"
          whileHover="hover"
          whileTap="tap"
          onMouseEnter={() => showTooltip('favorites')}
          onMouseLeave={hideTooltip}
        >
          <Link
            href="/favorites"
            className="flex items-center justify-center w-12 h-12 rounded-xl transition-colors"
          >
            <div className="relative">
              <Heart className="w-6 h-6 text-gray-600 transition-colors group-hover:text-amber-600" />
              {favorites.length > 0 && (
                <motion.span
                  initial={{ scale: 0 }}
                  animate={{ scale: 1 }}
                  className="absolute -right-1 -top-1 w-5 h-5 bg-gradient-to-r from-amber-500 to-amber-600 text-white text-xs rounded-full flex items-center justify-center shadow-md"
                >
                  {favorites.length}
                </motion.span>
              )}
            </div>
          </Link>
          {tooltip === 'favorites' && (
            <div
              className={`absolute ${isRTL ? 'right-full mr-2' : 'left-full ml-2'} top-1/2 -translate-y-1/2 px-2 py-1 bg-gray-800 text-white text-xs rounded-lg whitespace-nowrap z-20 shadow-lg flex items-center`}
            >
              <span className="relative">
                المفضلة
                <span
                  className={`absolute ${isRTL ? 'right-full -mr-1' : 'left-full -ml-1'} top-1/2 -translate-y-1/2 w-0 h-0 border-t-4 border-b-4 border-transparent ${
                    isRTL ? 'border-r-4 border-r-gray-800' : 'border-l-4 border-l-gray-800'
                  }`}
                ></span>
              </span>
            </div>
          )}
        </motion.div>
        <motion.div
          className="relative group"
          variants={buttonVariants}
          initial="rest"
          whileHover="hover"
          whileTap="tap"
          onMouseEnter={() => showTooltip('notifications')}
          onMouseLeave={hideTooltip}
        >
          <Link
            href="/notifications"
            className="flex items-center justify-center w-12 h-12 rounded-xl transition-colors"
          >
            <div className="relative">
              <Bell className="w-6 h-6 text-gray-600 transition-colors group-hover:text-amber-600" />
              <motion.span
                initial={{ scale: 0 }}
                animate={{ scale: 1 }}
                className="absolute -right-1 -top-1 w-5 h-5 bg-gradient-to-r from-red-500 to-red-600 text-white text-xs rounded-full flex items-center justify-center shadow-md"
              >
                3
              </motion.span>
            </div>
          </Link>
          {tooltip === 'notifications' && (
            <div
              className={`absolute ${isRTL ? 'right-full mr-2' : 'left-full ml-2'} top-1/2 -translate-y-1/2 px-2 py-1 bg-gray-800 text-white text-xs rounded-lg whitespace-nowrap z-20 shadow-lg flex items-center`}
            >
              <span className="relative">
                الإشعارات
                <span
                  className={`absolute ${isRTL ? 'right-full -mr-1' : 'left-full -ml-1'} top-1/2 -translate-y-1/2 w-0 h-0 border-t-4 border-b-4 border-transparent ${
                    isRTL ? 'border-r-4 border-r-gray-800' : 'border-l-4 border-l-gray-800'
                  }`}
                ></span>
              </span>
            </div>
          )}
        </motion.div>
        <motion.div
          className="relative group"
          variants={buttonVariants}
          initial="rest"
          whileHover="hover"
          whileTap="tap"
          onMouseEnter={() => showTooltip('payments')}
          onMouseLeave={hideTooltip}
        >
          <Link
            href="/payments"
            className="flex items-center justify-center w-12 h-12 rounded-xl transition-colors"
          >
            <CreditCard className="w-6 h-6 text-gray-600 transition-colors group-hover:text-amber-600" />
          </Link>
          {tooltip === 'payments' && (
            <div
              className={`absolute ${isRTL ? 'right-full mr-2' : 'left-full ml-2'} top-1/2 -translate-y-1/2 px-2 py-1 bg-gray-800 text-white text-xs rounded-lg whitespace-nowrap z-20 shadow-lg flex items-center`}
            >
              <span className="relative">
                المدفوعات
                <span
                  className={`absolute ${isRTL ? 'right-full -mr-1' : 'left-full -ml-1'} top-1/2 -translate-y-1/2 w-0 h-0 border-t-4 border-b-4 border-transparent ${
                    isRTL ? 'border-r-4 border-r-gray-800' : 'border-l-4 border-l-gray-800'
                  }`}
                ></span>
              </span>
            </div>
          )}
        </motion.div>
      </div>
    </motion.div>
  );
}