interface Props {
  plan: string
}

export function UpgradePrompt({ plan }: Props) {
  const target = plan === 'free' ? 'Starter' : 'Pro'
  return (
    <div className="mb-6 p-4 bg-gradient-to-r from-[#F5F3FF] to-[#ECFEFF] border border-[#DDD6FE] rounded-xl">
      <div className="flex items-center justify-between">
        <div>
          <p className="font-semibold text-gray-900">Usage limit reached</p>
          <p className="text-sm text-gray-600">
            Upgrade to {target} for more link suggestions and features.
          </p>
        </div>
        <a
          href={window.supacoContentBridge.pricingUrl + '?app=content_hub'}
          target="_blank" rel="noopener noreferrer"
          className="px-4 py-2 bg-[#6C63FF] text-white text-sm font-medium rounded-lg hover:bg-[#5B52E0] transition-colors"
        >
          Upgrade Now
        </a>
      </div>
    </div>
  )
}