the-tip-top-frontend/components/TeaIconsBackground.tsx

'use client';

import React from 'react';
import Image from 'next/image';

interface TeaIconsBackgroundProps {
  animationKey?: number;
}

const TEA_ICONS = [
  // Ligne 1 - 5 icons
  { src: '/images/tea-icons/teapot-green.png', alt: 'Théière verte', top: '5%', left: '10%', duration: '28s' },
  { src: '/images/tea-icons/tea-cup.png', alt: 'Tasse de thé', top: '7%', left: '30%', duration: '32s' },
  { src: '/images/tea-icons/gift-box.png', alt: 'Boîte cadeau', top: '6%', left: '50%', duration: '30s' },
  { src: '/images/tea-icons/tea-leaves.png', alt: 'Feuilles de thé', top: '8%', left: '70%', duration: '27s' },
  { src: '/images/tea-icons/teapot-pink.png', alt: 'Théière rose', top: '5%', left: '90%', duration: '31s' },
  // Ligne 2 - 5 icons
  { src: '/images/tea-icons/tea-leaves.png', alt: 'Feuilles de thé', top: '18%', left: '15%', duration: '29s' },
  { src: '/images/tea-icons/teapot-green.png', alt: 'Théière verte', top: '20%', left: '35%', duration: '26s' },
  { src: '/images/tea-icons/tea-cup.png', alt: 'Tasse de thé', top: '19%', left: '55%', duration: '33s' },
  { src: '/images/tea-icons/gift-box.png', alt: 'Boîte cadeau', top: '21%', left: '75%', duration: '28s' },
  { src: '/images/tea-icons/teapot-pink.png', alt: 'Théière rose', top: '18%', left: '95%', duration: '30s' },
  // Ligne 3 - 5 icons
  { src: '/images/tea-icons/gift-box.png', alt: 'Boîte cadeau', top: '31%', left: '10%', duration: '27s' },
  { src: '/images/tea-icons/tea-cup.png', alt: 'Tasse de thé', top: '33%', left: '30%', duration: '31s' },
  { src: '/images/tea-icons/teapot-green.png', alt: 'Théière verte', top: '32%', left: '50%', duration: '29s' },
  { src: '/images/tea-icons/tea-leaves.png', alt: 'Feuilles de thé', top: '34%', left: '70%', duration: '26s' },
  { src: '/images/tea-icons/teapot-pink.png', alt: 'Théière rose', top: '31%', left: '90%', duration: '32s' },
  // Ligne 4 - 5 icons
  { src: '/images/tea-icons/tea-leaves.png', alt: 'Feuilles de thé', top: '44%', left: '15%', duration: '28s' },
  { src: '/images/tea-icons/teapot-pink.png', alt: 'Théière rose', top: '46%', left: '35%', duration: '30s' },
  { src: '/images/tea-icons/gift-box.png', alt: 'Boîte cadeau', top: '45%', left: '55%', duration: '33s' },
  { src: '/images/tea-icons/teapot-green.png', alt: 'Théière verte', top: '47%', left: '75%', duration: '27s' },
  { src: '/images/tea-icons/tea-cup.png', alt: 'Tasse de thé', top: '44%', left: '95%', duration: '29s' },
  // Ligne 5 - 5 icons
  { src: '/images/tea-icons/teapot-green.png', alt: 'Théière verte', top: '57%', left: '10%', duration: '31s' },
  { src: '/images/tea-icons/tea-leaves.png', alt: 'Feuilles de thé', top: '59%', left: '30%', duration: '26s' },
  { src: '/images/tea-icons/tea-cup.png', alt: 'Tasse de thé', top: '58%', left: '50%', duration: '30s' },
  { src: '/images/tea-icons/gift-box.png', alt: 'Boîte cadeau', top: '60%', left: '70%', duration: '28s' },
  { src: '/images/tea-icons/teapot-pink.png', alt: 'Théière rose', top: '57%', left: '90%', duration: '32s' },
  // Ligne 6 - 5 icons
  { src: '/images/tea-icons/tea-cup.png', alt: 'Tasse de thé', top: '70%', left: '15%', duration: '29s' },
  { src: '/images/tea-icons/gift-box.png', alt: 'Boîte cadeau', top: '72%', left: '35%', duration: '27s' },
  { src: '/images/tea-icons/teapot-pink.png', alt: 'Théière rose', top: '71%', left: '55%', duration: '31s' },
  { src: '/images/tea-icons/tea-leaves.png', alt: 'Feuilles de thé', top: '73%', left: '75%', duration: '28s' },
  { src: '/images/tea-icons/teapot-green.png', alt: 'Théière verte', top: '70%', left: '95%', duration: '30s' },
  // Ligne 7 - 5 icons
  { src: '/images/tea-icons/gift-box.png', alt: 'Boîte cadeau', top: '83%', left: '10%', duration: '26s' },
  { src: '/images/tea-icons/teapot-green.png', alt: 'Théière verte', top: '85%', left: '30%', duration: '32s' },
  { src: '/images/tea-icons/tea-leaves.png', alt: 'Feuilles de thé', top: '84%', left: '50%', duration: '29s' },
  { src: '/images/tea-icons/tea-cup.png', alt: 'Tasse de thé', top: '86%', left: '70%', duration: '27s' },
  { src: '/images/tea-icons/teapot-pink.png', alt: 'Théière rose', top: '83%', left: '90%', duration: '31s' },
];

export const TeaIconsBackground: React.FC<TeaIconsBackgroundProps> = ({ animationKey }) => {
  return (
    <div className="fixed inset-0 -z-10 overflow-hidden">
      {/* Fond dégradé beige clair */}
      <div className="absolute inset-0 bg-gradient-to-br from-[#fdfcf8] via-[#f8f6f0] to-[#f0ede5]"></div>

      {/* Icônes de thé dispersées avec animation */}
      <div key={animationKey} className="absolute inset-0 opacity-[0.5]">
        {TEA_ICONS.map((icon, index) => (
          <Image
            key={index}
            src={icon.src}
            alt={icon.alt}
            width={56}
            height={56}
            className="absolute animate-float-gentle"
            style={{
              top: icon.top,
              left: icon.left,
              animationDuration: icon.duration,
            }}
          />
        ))}
      </div>

      {/* Overlay lumineux pour harmoniser */}
      <div className="absolute inset-0 bg-gradient-radial from-white/30 via-transparent to-transparent"></div>
    </div>
  );
};

export default TeaIconsBackground;