'use client';

import { Lock, Sparkles } from 'lucide-react';
import { useRouter } from 'next/navigation';
import type { Feature } from '@/types/subscription';
import { getFeatureLabel } from '@/lib/subscription/features';

interface UpgradePromptProps {
  feature: Feature;
  className?: string;
  compact?: boolean;
}

export function UpgradePrompt({ feature, className = '', compact = false }: UpgradePromptProps) {
  const router = useRouter();

  if (compact) {
    return (
      <button
        onClick={() => router.push('/settings/billing')}
        className={`inline-flex items-center gap-1.5 rounded-lg border border-amber-500/[0.20] bg-amber-500/[0.08] px-2.5 py-1 text-[11px] font-medium text-amber-300 hover:bg-amber-500/[0.14] transition-colors ${className}`}
      >
        <Lock className="w-3 h-3" />
        Upgrade
      </button>
    );
  }

  return (
    <div className={`rounded-2xl border border-amber-500/[0.16] bg-[radial-gradient(ellipse_at_top_left,rgba(245,158,11,0.07),rgba(10,8,18,0.98)_55%)] p-6 text-center ${className}`}>
      <div className="mx-auto mb-3 flex h-10 w-10 items-center justify-center rounded-xl border border-amber-500/[0.18] bg-amber-500/[0.10]">
        <Lock className="w-5 h-5 text-amber-400" />
      </div>
      <p className="text-sm font-semibold text-white">{getFeatureLabel(feature)}</p>
      <p className="mt-1 text-xs text-white/40">Dieses Feature ist in deinem aktuellen Plan nicht enthalten.</p>
      <button
        onClick={() => router.push('/settings/billing')}
        className="mt-4 flex items-center gap-2 mx-auto rounded-xl border border-amber-500/[0.20] bg-amber-500/10 px-4 py-2 text-sm font-medium text-amber-300 hover:bg-amber-500/20 transition-colors"
      >
        <Sparkles className="w-4 h-4" />
        Plan upgraden
      </button>
    </div>
  );
}