import React from 'react'

interface UsageLimitWarningProps {
  usageLimitError: string | null
  onDismiss: () => void
}

export default function UsageLimitWarning({
  usageLimitError,
  onDismiss
}: UsageLimitWarningProps) {
  if (!usageLimitError) return null

  return (
    <div className="mb-2 p-3 bg-red-900/20 border border-red-700/50 rounded-lg">
      <div className="flex items-start gap-2">
        <div className="flex-shrink-0 w-4 h-4 bg-red-600 rounded-full flex items-center justify-center mt-0.5">
          <span className="text-white text-[10px] font-bold">!</span>
        </div>
        <div className="flex-1">
          <div className="text-red-300 text-xs whitespace-pre-line leading-relaxed">
            {usageLimitError}
          </div>
          <div className="mt-2 flex gap-2">
            <a 
              href="/pricing" 
              target="_blank"
              rel="noopener noreferrer"
              className="inline-flex items-center px-2 py-1 bg-gradient-to-r from-teal-600 to-cyan-600 hover:from-teal-700 hover:to-cyan-700 text-white text-[10px] font-medium rounded transition-colors duration-150"
            >
              ⚡ Upgrade Plan
            </a>
            <button
              type="button"
              onClick={onDismiss}
              className="inline-flex items-center px-2 py-1 text-red-400 hover:text-red-300 border border-red-600/50 hover:border-red-500/50 text-[10px] rounded transition-colors duration-150"
            >
              Dismiss
            </button>
          </div>
        </div>
      </div>
    </div>
  )
}