'use client';

import React from 'react';
import { useSession } from '@/context/SessionContext';
import { GlassWater, Square, ArrowRight, Sparkles } from 'lucide-react';
import Link from 'next/link';
import { useI18n } from '@/i18n/I18nContext';

export default function ActiveSessionBanner() {
    const { activeSession, setActiveSession } = useSession();
    const { t } = useI18n();

    if (!activeSession) return null;

    return (
        <div className="fixed top-0 left-0 right-0 z-[100] animate-in slide-in-from-top duration-500">
            <div className="bg-amber-600 text-white px-4 py-2 flex items-center justify-between shadow-lg">
                <Link
                    href={`/sessions/${activeSession.id}`}
                    className="flex items-center gap-3 flex-1 min-w-0"
                >
                    <div className="relative shrink-0">
                        <div className="bg-white/20 p-1.5 rounded-lg">
                            <Sparkles size={16} className="text-white animate-pulse" />
                        </div>
                        <div className="absolute -top-1 -right-1 w-2.5 h-2.5 bg-red-500 rounded-full border-2 border-amber-600 animate-ping" />
                    </div>
                    <div className="min-w-0">
                        <div className="flex items-center gap-2 mb-0.5">
                            <span className="text-[9px] font-black uppercase tracking-widest bg-white/20 px-1.5 py-0.5 rounded leading-none text-white whitespace-nowrap">Live Jetzt</span>
                            <p className="text-[10px] font-black uppercase tracking-wider opacity-90 leading-none truncate">{t('session.activeSession')}</p>
                        </div>
                        <p className="text-sm font-bold truncate leading-none">{activeSession.name}</p>
                    </div>
                    <ArrowRight size={14} className="opacity-50 ml-1 shrink-0" />
                </Link>

                <button
                    onClick={() => setActiveSession(null)}
                    className="ml-4 p-2 hover:bg-white/10 rounded-full transition-colors"
                    title="End Session"
                >
                    <Square size={20} fill="currentColor" />
                </button>
            </div>
        </div>
    );
}
