"use client";

import React from "react";
import confetti from "canvas-confetti";
import { Star } from "lucide-react";
import { useTranslations } from 'next-intl';

export default function SupporterMessage({ tier }: { tier: string }) {
    
    const t = useTranslations();

    return (
        <div className="relative flex items-center space-x-2 whitespace-nowrap group">
            <span
                className="cursor-pointer"
                onClick={(e) => {
                    // Get the bounding box of the element
                    const rect = (
                        e.target as HTMLElement
                    ).getBoundingClientRect();

                    // Trigger confetti centered on the word "Pangolin"
                    confetti({
                        particleCount: 100,
                        spread: 70,
                        origin: {
                            x: (rect.left + rect.width / 2) / window.innerWidth,
                            y: rect.top / window.innerHeight
                        },
                        colors: ["#FFA500", "#FF4500", "#FFD700"]
                    });
                }}
            >
                Pangolin
            </span>
            <Star className="w-3 h-3"/>
            <div className="absolute left-1/2 transform -translate-x-1/2 -top-10 hidden group-hover:block  text-primary text-sm rounded-md border shadow-md px-4 py-2 pointer-events-none opacity-0 group-hover:opacity-100 transition-opacity">
                {t('componentsSupporterMessage', {tier: tier})}
            </div>
        </div>
    );
}