import React from 'react';
import { useApp } from '../context/AppContext';
import { AlertTriangle, X, ArrowRight } from 'lucide-react';

/** Plan kotası aşıldığında sunucudan gelen uyarıyı gösterir. */
export const KotaUyarisi = () => {
  const { kotaUyarisi, setKotaUyarisi, setActiveTab } = useApp();
  if (!kotaUyarisi) return null;
  return (
    <div role="alert" className="bg-amber-50 border border-amber-300 rounded-xl p-4 my-3 flex items-start gap-3">
      <AlertTriangle className="w-4 h-4 text-amber-700 shrink-0 mt-0.5" />
      <p className="text-xs text-amber-900 leading-relaxed flex-1">{kotaUyarisi}</p>
      <button type="button" onClick={() => { setKotaUyarisi(null); setActiveTab('planlar'); }}
        className="text-[11px] font-bold text-amber-900 hover:underline flex items-center gap-1 shrink-0">
        Planlar <ArrowRight className="w-3 h-3" />
      </button>
      <button type="button" onClick={() => setKotaUyarisi(null)} aria-label="Kota uyarısını kapat" className="text-amber-600 hover:text-amber-900 shrink-0">
        <X className="w-4 h-4" />
      </button>
    </div>
  );
};